使用jquery关闭可折叠菜单
使用jquery关闭可折叠菜单
提问于 2018-01-09 02:17:19
当使用jquery单击时，我正在尝试关闭可折叠菜单的内容。下面我附上了小提琴以供参考。
<div id="advent">
<i id="arrow" class="fa fa-plus-circle" style="margin-left:40px"></i>
Advent
<div id="expand" style="display:none">Content</div>
</div>
<script>
$('#advent').click(function () {
$("#arrow", this).toggleClass("fa-minus-circle");
$('#expand').show();
if($this.hasClass()){
$('#expand').slideUp();
}
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-09 02:22:23
只需使用toggle或slideToggle
$('#advent').click(function () {
$("#arrow", this).toggleClass("fa-minus-circle");
$('#expand').slideToggle();
});Stack Overflow用户
发布于 2018-01-09 02:20:59
没有$this，所以整个子句都不起作用。尝试使用jQuery的.is(':hidden')查看它是否被隐藏，并以这种方式切换它：
$('#advent').click(function () {
$("#arrow", this).toggleClass("fa-minus-circle");
if ($('#expand').is(':hidden')) {
$('#expand').show();
} else {
$('#expand').slideUp();
}
});<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advent">
<i id="arrow" class="fa fa-plus-circle" style="margin-left:40px"></i>
Advent
<div id="expand" style="display:none">Content</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48155900
复制相关文章
相似问题
腾讯云开发者
