使用jquery关闭可折叠菜单

Question

我试图在使用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>

https://jsfiddle.net/5trqxn6t/3/

Answer 1

只需使用切换或slideToggle

即可

followingPeople

{{3}}

Answer 2

没有$this，所以整个条款都不起作用。尝试使用jQuery＆＃39; .is(':hidden')查看它是否隐藏，并以此方式切换：

＆＃13;

＆＃13;

$('#advent').click(function () {
		$("#arrow", this).toggleClass("fa-minus-circle");
    if ($('#expand').is(':hidden')) {
			$('#expand').show();
    } else {
    	$('#expand').slideUp();
    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;