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向下滑动但是当我点击时小组阶段taht已经滑落，没有滑动。

如果我在代码中遗漏了某些内容，请纠正我。

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

之前始终隐藏它

Answer 2

您必须从.panel-stage中排除候选slideUp并仅应用slideToggle

工作fiddle

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

2 个答案: