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

Question

当我想通过单击同一手风琴的另一个选项卡来关闭手风琴中的一个选项卡时，我遇到了问题.

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

它的行为真的很奇怪！

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

<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元素。