Question

我有5个<a>链接，我想从下面滑动内容，但如果用户打开一个然后打开另一个，第一个关闭，所以只有1个保持打开状态。

我几乎在那里有代码，面板向上滑动，如果你点击下一个，另一个关闭，下一个打开。但我无法将它们全部关闭，如果我点击打开一个然后再次点击关闭它重新打开。

我的JS：

$('.panelTab').click(function() {
    $('.animatedPanel').hide();
    $(this).next('.animatedPanel').slideToggle({ direction: "up" }, 100);

我的HTML：

<div class="panelTab first">
    <a class="click" href="#">LATEST NEWS</a>
</div>
<div class="animatedPanel">news panel...</div>
<div class="panelTab">
    <a class="click" href="#">CALENDAR</a>
</div>
<div class="animatedPanel"> calendar panel...</div>

Answer 1

您需要在隐藏所有.animatedpanel s

时避免使用当前点击的元素

$('.panelTab').click(function() {
    var panel = $(this).next()
    $('.animatedPanel').not(panel).slideUp();
    panel.slideToggle({
        direction: "up"
    }, 100);
});

Fiddle

多个切换打开关闭面板

1 个答案: