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是否已经可见。试试这个：

<a>
<b></b>
<e>
   <b></b>
   <c></c>
</e>
<i>
  <e>
    <b></b>
    <c></c>
  </e>
</i> 
</a>

Example fiddle

滑动切换div代码，再次点击时关闭

1 个答案: