Javascript jquery中的可折叠菜单

我有一个侧面可折叠面板，单击箭头图标时子内容隐藏，单击箭头隐藏后子内容显示。 有一个jquery代码用于向下滑动和向上滑动功能，是否有一种默认方式隐藏子内容，并单击箭头相应地显示或隐藏子内容？ 代码如下所示

jQuery（函数（$）{
$（'.active span.clickable'）。打开（“单击”，函数（e）{
if（$（this）.hasClass（'panel-collapsed'））{
//展开面板
$（this）.parents（'.active'）.find（'.collapsein'）.slideDown（）；
$（this.removeClass（'panel-collapsed'）；
$（this）.find（'i'）.removeClass（'glyphicon-chevron-down'）.addClass（'glyphicon-chevron-up'）；
}否则{
//折叠面板
$（this）.parents（'.active'）.find（'.collapsein'）.slideUp（）；
$（this.addClass（'panel-collapsed'）；
$（this）.find（'i'）.removeClass（'glyphicon-chevron-up'）.addClass（'glyphicon-chevron-down'）；
}
});
});



子数据1
子数据2
子数据3

如果希望子菜单默认隐藏，则需要添加
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>

<a href="#">Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span></a>

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');
    }
});
});

工作JSFIDLE:：
如果希望列表在默认情况下显示为隐藏，则只需进行简单的调整。首先将css设置为显示：none

CSS

.collapsein{
    display: none;
}

.collapsein {
    display: none;
}

并将折叠的类面板添加到可单击的范围中

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>

<a href="#">Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span></a>




为清晰起见，向左向下移动箭头。
谢谢您的回答！！！！
必须添加css代码才能正常工作

.collapsein{
    display: none;
}

将此脚本代码用于Jquery

<script>
$(function(){
  $("#accordian h3").click(function(){
  $("#accordian ul ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});
</script>


$（函数（）{
$（“#手风琴h3”）。单击（函数（）{
$（“#手风琴ul”）.slideUp（）；
如果（$（this）.next（）是（“：hidden”））{
$（this.next（）.slideDown（）；
}
});
});

在html中调用accordian id，如下所示：

<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li><a href="#">Sub menu1</a> </li> 
<li><a href="#">Sub menu2</a> </li> 
<li><a href="#">Sub menu3</a> </li> 
<li><a href="#">Sub menu4</a> </li> 
</ul> 
</li>
</div>




仪表板








以下是
如果您需要先隐藏suybmenu，那么您需要先在CSS中隐藏它：
。collapsein{display:none；}
它不工作，兄弟。她还犯了一些其他的错误。如果你的意思是当你点击锚定标签时什么也没有发生，那么这就是他们设置锚定标签的方式。你必须一直点击右边指向下方的V形：）我认为clickable和其他类应该在锚点上，但如果他们想在标签上显示，那么不管怎样。Esteann这是Rana、Manuel和Flexicon之前告诉过你的，如果有用户告诉你，请不要用正确的答案回答，只需标记正确的答案。@Esteann如果答案对您和其他人有帮助，请对其进行投票。加载页面后，首先单击“它不工作”，然后再次单击“它工作正常”，请在代码中修复此问题