javascript - 如何创建 jQuery 代码以在同一页面中实现多个 slidetoggle？

Question

这是我的代码:

HTML

<div class="panel">
    <a href="#" class="panel-tab">Previous year papers of Bank Clerks<span>&#9660;</span></a>
    <div class="panel-stage" id="panel-stage-1">
        <a href="#">SBI Clerk 2008</a><br />
        <a href="#">Ibps Clerk 2015</a><br />
    </div> 

    <a href="#" class="panel-tab">Previous Year Papers Of BHU CHS<span>&#9660;</span></a>

    <div class="panel-stage" id="panel-stage-2">
        <a href="#">CHS (Maths) -2013</a><br />
        <a href="#">CHS (Maths) -2014</a><br />
        <a href="#">CHS (Maths) -2015</a><br />
    </div>

    <a href="#" class="panel-tab">Previous Year Papers Of Lucknow University<span>&#9660;</span></a>

    <div class="panel-stage" id="panel-stage-3">
        <a href="#">B.Sc 3rd year -2013</a><br />
        <a href="#">CHS (Maths) -2016</a><br />
    </div>
</div>

jQuery 代码:

$('.panel-tab').on('click', function (event) 
{
    event.preventDefault();

    $('.panel-stage').slideUp('fast');

    $(this).next('.panel-stage').slideToggle('slow', function (e) 
         {
         }); 
});

此代码工作意味着当我点击 panel-stage-1 时它向下滑动，当点击 panel-stage-2 之后 panel-stage-1 向上滑动而 panel-stage-2 向下滑动但是当我点击panel-stage taht 已经是 slidedown，不是 slideup。

如果我在代码中遗漏了什么，请纠正我。

Answer 1

您可能需要将 $('.panel-tab') 点击事件添加到 $(document).ready() 中。像这样:

$(document).ready(function() {
    $('.panel-tab').on('click', function (event) {
        event.preventDefault();
        $('.panel-stage').slideUp('fast');
        $(this).next('.panel-stage').slideToggle('slow');
    });
});

并将 .panel-stage {display:none} 添加到您的样式表中，以确保它在您单击 .panel-tab 之前始终处于隐藏状态