javascript - 如何用纯 javascript 和 html 制作 Accordion

Question

我希望这个列表表现得像一个 Accordion 。我必须在不使用 jQuery 或其他外部库的情况下在纯 javascript 中执行此操作。我不允许调整下面显示的 HTML 代码。

<ul class="accordion">
        <li><a href="#">Apple</a>
            <ul>
                <li><a href="#">abc</a></li>
                <li><a href="#">xyz</a></li>
                <li><a href="#">pqr</a></li>
            </ul>
        </li>
        <li><a href="#">Apple1</a></li>
        <li><a href="#">Apple2</a></li>
        <li><a href="#">Apple3</a></li>
        <li><a href="#">Apple4</a></li>
    </ul>

我有下面@Ruud 提供的 javascript 代码，它显示 Accordion 菜单但没有动画效果。我想要一次只激活一个元素的动画效果

window.getTopUL = function() {
    var uls = document.getElementsByTagName('UL');
    for (var i = 0; i < uls.length; i++) {
        if (uls[i].className == 'accordion') return uls[i];
    }
    return null;
};

window.getChild = function(li, tag) {
    return li.getElementsByTagName(tag)[0];
};

window.toggleDisplay = function(s) {
    s.display = s.display == 'none' ? 'block' : 'none';
};

window.setEventHandlers = function(topUL) {
    if (topUL) {
        var lis = document.getElementsByTagName('LI');
        for (var i = 0; i < lis.length; i++) {
            var ul = getChild(lis[i], 'UL');
            if (ul) {
                ul.style.display = 'none';
                getChild(lis[i], 'A').onclick = function() {
                    toggleDisplay(getChild(this.parentNode, 'UL').style);
                    return false;
                }
            }
        }
    }
};

setEventHandlers(getTopUL());

---

window.getTopUL = function() {
  var uls = document.getElementsByTagName('UL');
  for (var i = 0; i < uls.length; i++) {
    if (uls[i].className == 'accordion') return uls[i];
  }
  return null;
};

window.getChild = function(li, tag) {
  return li.getElementsByTagName(tag)[0];
};

window.toggleDisplay = function(s) {
  s.display = s.display == 'none' ? 'block' : 'none';
};

window.setEventHandlers = function(topUL) {
  if (topUL) {
    var lis = document.getElementsByTagName('LI');
    for (var i = 0; i < lis.length; i++) {
      var ul = getChild(lis[i], 'UL');
      if (ul) {
        ul.style.display = 'none';
        getChild(lis[i], 'A').onclick = function() {
          toggleDisplay(getChild(this.parentNode, 'UL').style);
          return false;
        }
      }
    }
  }
};

setEventHandlers(getTopUL());

<ul class="accordion">
  <li><a href="#">Apple</a>
    <ul>
      <li><a href="#">abc</a>
      </li>
      <li><a href="#">xyz</a>
      </li>
      <li><a href="#">pqr</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Apple1</a>
  </li>
  <li><a href="#">Apple2</a>
  </li>
  <li><a href="#">Apple3</a>
  </li>
  <li><a href="#">Apple4</a>
  </li>
</ul>

Answer 1

你也可以用简单的html和css来做

/* Clean up the lists styles */
ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion label + input[type='radio'] {
    display: none;
}

/* Give each content pane some styles */
ul.accordion li {
    background-color: #CCCCCC;
    border-bottom: 1px solid #DDDDDD;
}

/* Make the main tab look more clickable */
ul.accordion label {
    background-color: #666666;
    color: #FFFFFF;
    display: block;
    padding: 10px;
}

ul.accordion label:hover {
    cursor: pointer;
}

/* Set up the div that will show and hide */
ul.accordion div.content {
    overflow: hidden;
    padding: 0 10px;
    display: none;
}

/* Show the content boxes when the radio buttons are checked */
ul.accordion label + input[type='radio']:checked + div.content {
    display: block;
}

<ul class='accordion'>
    <li>
        <label for='cp-1'>Content pane 1</label>
        <input type='radio' name='a' id='cp-1' checked='checked'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-2'>Content pane 2</label>
        <input type='radio' name='a' id='cp-2'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-3'>Content pane 3</label>
        <input type='radio' name='a' id='cp-3'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-4'>Content pane 4</label>
        <input type='radio' name='a' id='cp-4'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-5'>Content pane 5</label>
        <input type='radio' name='a' id='cp-5'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
</ul>