javascript - 为什么我的 Accordion 列表总是关闭？

Question

我创建了一个包含 Accordion 列表的侧面菜单。当我加载页面时， Accordion 列表会打开一个部分，因为它被编码为在页面加载时处于事件状态。但是，如果我尝试打开另一个部分...它会打开该部分，但会立即关闭。有人能告诉我哪里出错了吗？

列表代码:

<ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl">
  <ul>
    <li class="active">
      <h3><span class="icon-dashboard"></span>Group 1</h3>
      <ul>
        <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li>
      </ul>
    </li>
    <!-- we will keep this LI open by default -->
    <li>
      <h3><span class="icon-tasks"></span>Group 2</h3>
      <ul>
        <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li>
      </ul>
    </li>
    <li>
      <h3><span class="icon-calendar"></span>Group 3</h3>
      <ul>
        <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li>
      </ul>
    </li>
  </ul>

JS:

$(document).ready(function(){
  $("#accordian h3").click(function(){
    //slide up all the link lists
    $("#accordian ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if(!$(this).next().is(":visible"))
    {
      $(this).next().slideDown();
    }
  })
})

Answer 1

您必须等到 slideUp 函数执行完成 ( by default the duration is 400ms )，然后才能测试下一个元素是否可见。

$(document).ready(function(){
  $("#accordian h3").click(function(){
    //slide up all the link lists
    $("#accordian ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
      var $elemH3 = $(this);
      setTimeout(function() {
          if(!$elemH3.next().is(":visible"))
          {
              $elemH3.next().slideDown();
          }
      }, 401);

  })
})

您可以使用一些 CSS 来轻松完成此操作，请参阅此示例:http://jsfiddle.net/nx2LkoLd/ 您隐藏所有部分，但不隐藏事件部分:

CSS代码

li.active ul {
    display:block;
}
li ul {
    display: none;
}

js和html代码还是一样的。

希望内容清楚并能帮助您解决问题。