我有一个侧面可折叠面板,单击箭头图标时,子内容将被隐藏,一旦单击箭头隐藏,子内容就会显示。 有一个用于向下滑动和向上滑动功能的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>
最佳答案
如果您希望子菜单默认隐藏,则需要添加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/
关于javascript - jquery中的可折叠菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42831537/