javascript - jquery中的可折叠菜单

Question

我有一个侧边可折叠面板，点击箭头图标隐藏子内容，点击箭头隐藏子内容显示。有一个用于向下滑动和向上滑动功能的 jquery 代码，有没有办法默认隐藏子内容并单击箭头相应地显示或隐藏子内容？代码如下

jQuery(function($) {
  $('.active span.clickable').on("click", function(e) {
    if ($(this).hasClass('panel-collapsed')) {
      // expand the panel
      $(this).parents('.active').find('.collapsein').slideDown();
      $(this).removeClass('panel-collapsed');
      $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    } else {
      // collapse the panel
      $(this).parents('.active').find('.collapsein').slideUp();
      $(this).addClass('panel-collapsed');
      $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
  <a href="#">Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span></a>
  <ul class="collapsein ">
    <li><label>Sub Data1</label></li>
    <li><label>Sub Data2</label></li>
    <li><label>Sub Data3</label></li>
  </ul>
</li>

Answer 1

如果你想默认隐藏子菜单，你需要添加css。请按照下面的代码，它会完成你的工作::

HTML

<li class="active">
    <a href="#" class="clickable panel-collapsed">Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
    <ul class="collapsein ">
        <li><label>Sub Data1</label></li>
        <li><label>Sub Data2</label></li>        
        <li><label>Sub Data3</label></li>                         
    </ul>
</li>

CSS

.collapsein{
    display: none;
}

JQUERY

jQuery(function ($) {
$('.active a.clickable').on("click", function (e) {
    if ($(this).hasClass('panel-collapsed')) {
        // expand the panel
        $(this).parents('.active').find('.collapsein').slideDown();
        $(this).removeClass('panel-collapsed');
        $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }
    else {
        // collapse the panel
        $(this).parents('.active').find('.collapsein').slideUp();
        $(this).addClass('panel-collapsed');
        $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
});
});

工作 JSFiddle::https://jsfiddle.net/80fpe9d9/