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/

Answer 2

如果您希望列表默认显示为隐藏，则只需进行简单调整即可。你首先要设置它的css来显示：none。

<强> CSS

.collapsein {
    display: none;
}

还可以将类面板折叠到您的可点击范围

<强> HTML

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

Working JSBin

为了清晰起见，向左移动了箭头。

Answer 3

感谢您的回答!!!! 必须添加css代码才能正常工作

.collapsein{
    display: none;
}

Answer 4

将此脚本代码与Jquery一起使用

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

按如下所示在html中调用手风琴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>

这里是Reference and Demo

jquery中的可折叠菜单

4 个答案: