Question

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

列出代码：

<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代码仍然相同。

希望它清楚，并帮助您解决问题。

Answer 2

手风琴的默认位置已折叠...将其放在$(document).ready的开头，以展开它。

$('#accordian').collapse({toggle: true});

<强> 编辑：

在你的情况下：

$(document).ready(function(){
    $('#accordian').collapse({toggle: true});

});

或者......如果您希望您的手风琴扩展独立于ready事件，您可以将此行放在js文件中的任何位置（在另一个function内除外）：

$(function () { $('#accordian').collapse({toggle: true}); });

两者都有效，但我不确定你自己的功能是否有效，所以要小心。对不起，没时间考试。 ;）

为什么我的手风琴名单会继续关闭？

2 个答案: