如何使用javascript再次关闭下拉列表

Question

再次点击打开下拉列表后，如何关闭它？如果你现在打开后点击它，它不会关闭。我找到了一些解决方案并尝试过，但我无法使它与我的代码一起工作。

$(document).ready(function () {
$(".accordion > a").on("click", function () {
if ($(this).hasClass('active')) {
$(this).removeClass("active");


$(this).addClass("active");
$('.accordion .content').slideUp(200);
$(this).siblings('.accordion .content').slideDown(200);
}
});
});

.col {
width: 33.3%;
float: left;
background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" data-id="231">
<a href="javascript:void(0);" class="grider clearfix active">
1.
</a>
<div class="content clearfix" style="display:none">
<div class="grider-2">
xxxx
</div>
</div>
</div>
<br><br>
<div class="accordion" data-id="232">
<a href="javascript:void(0);" class="grider clearfix active">
2.
</a>
<div class="content clearfix" style="display:none">
<div class="grider-2">
yyyy
</div>
</div>
</div>

Answer 1

请尝试以下操作：

$(document).ready(function () {
$(".accordion > a").on("click", function () {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
$('.accordion .content').slideUp(200);
} else {
$(".accordion > a").removeClass("active");
$('.accordion .content').slideUp(200);
$(this).addClass("active");
$(this).siblings('.accordion .content').slideDown(200);
}
});
});

其他相同

Answer 2

您的代码有点令人困惑，因为当类处于非活动状态时(当下拉列表关闭时(，您使用的是活动类。删除活动类，使手风琴以非活动状态启动。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" data-id="231">
<a href="javascript:void(0);" class="grider clearfix">
1.
</a>
<div class="content clearfix" style="display:none">
<div class="grider-2">
xxxx
</div>
</div>
</div>
<br><br>
<div class="accordion" data-id="232">
<a href="javascript:void(0);" class="grider clearfix">
2.
</a>
<div class="content clearfix" style="display:none">
<div class="grider-2">
yyyy
</div>
</div>
</div>

在js测试中，如果accordon有活动的类，如果它确实删除了该类并关闭了下拉列表，如果没有，那么添加该类并打开下拉列表。

$(document).ready(function () {
$(".accordion > a").on("click", function () {
if ($(this).hasClass('active')) 
{
$(this).removeClass("active");
$(this).siblings('.accordion .content').slideUp(200);
}
else
{
$(this).addClass("active");
$(this).siblings('.accordion .content').slideDown(200);
}
});
});

Answer 3

我对div的slideup和slidedown做了一些更改。

检查以下有助于切换的功能

$(document).ready(function () {
$(".accordion > a").on("click", function (e) {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).next().slideUp(200);
}
else{
$(this).addClass("active");
$(this).siblings(this).slideDown(200);
}
});
});

.col {
width: 33.3%;
float: left;
background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" data-id="231">
<a href="javascript:void(0);" class="grider clearfix">
1.
</a>
<div class="content clearfix" style="display:none">
<div class="grider-2">
xxxx
</div>
</div>
</div>
<br><br>
<div class="accordion" data-id="232">
<a href="javascript:void(0);" class="grider clearfix">
2.
</a>
<div class="content clearfix" style="display:none">
<div class="grider-2">
yyyy
</div>
</div>
</div>