单击另一个时关闭手风琴中的标签

Question

我想通过单击同一手风琴的另一个选项卡来关闭手风琴中的一个选项卡时遇到麻烦。

<script>
$(".accordion").on("click", ".accordion-header", function () {
    $(this).toggleClass("active").next().slideToggle();
    $(".accordion-header").next().slideToggle();
});
</script>

它的行为确实很奇怪！

我的一个选项卡的HTML结构就是这样，我有两个：

<div class="accordion">
<h2 class="accordion-header">Stream / Digital</h2>
<div class="accordion-content ul-list-platform">
<ul>
<li></li>
</ul>
</div>
</div>

感谢您的帮助！

Answer 1

$('.accordion').find('.accordion-header').on('click', function(){

     //Expand or collapse this panel
     //500 is animation time

     $(this).next().slideToggle(500);

     //Hide the other panels

     $(".accordion-content").not($(this).next()).slideUp(500);

});

尝试类似这样的方法。

.next()在单击标题h2元素之后展开下一个元素。

.not($(this).next())会折叠所有未被单击的accordion-content元素。