jquery - 滑动切换 div 代码，再次单击时关闭

Question

我对 jQuery 还是比较陌生，我正在使用下面的代码，它基本上可以满足我的需求:在同一个容器中显示多个内容，但一次只有一个处于事件状态并隐藏其余内容。

但是我也想这样:如果您再次单击同一个按钮以获取事件内容，它会再次关闭该内容，因此所有内容都会被隐藏。我只是无法让它工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
    <a href="#" class="links" data-showdiv="content1" id="button1">Button 1</a>
    <a href="#" class="links" data-showdiv="content2" id="button2">Button 2</a>
    <a href="#" class="links" data-showdiv="content3" id="button3">Button 3</a>
</div>
<div id="container">
    <div class="divs" id="content1" style="display:none">
        Test content 1
    </div>
    <div class="divs" id="content2" style="display:none">
        Test content 2
    </div>
    <div class="divs" id="content3" style="display:none">
        Test content 3
    </div>
</div>

$(document).ready(function() { 
    $(".links").click(function () {
        $(".divs:visible").slideToggle();
        $("#" + $(this).attr("data-showdiv")).slideToggle();
    });
}); 

Answer 1

您只需更改您的逻辑，首先检查目标 div 是否已经可见。试试这个:

$(".links").click(function () {
    var $target = $("#" + $(this).data('showdiv'));
    if ($target.is(':visible')) {
        $(".divs:visible").slideToggle();
    } else {
        $target.slideDown().siblings().slideUp();
    }
});

Example fiddle