单击另一个时关闭手风琴中的选项卡

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() 展开已单击的 header h2 元素之后的下一个元素。

.not($(this).next()) 折叠所有 accordion-content 不是被点击的元素。

单击另一个时关闭手风琴中的选项卡

Close a tab in accordion when click on another

html

jquery

accordion