jQuery 切换（单击以显示一个 div，同时隐藏其他 div）答案

【问题标题】：jQuery toggle (Click to show one div while hiding others)jQuery 切换（单击以显示一个 div，同时隐藏其他 div）
【发布时间】：2018-03-12 02:48:37
【问题描述】：

基本思想是我有一堆 div，其中每个都可以切换（显示/隐藏）。

当切换一个 div 时，我希望其他当前显示为隐藏的 div，因此一次只允许显示一个 div。

此外，我还希望能够在元素外部单击以隐藏打开的 div。

为了让事情更清楚，我提供了一个示例，除了在打开另一个 div 时关闭一个 div（一次只打开一个 div 功能）之外，它目前可以执行我想要的所有操作：

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $("div.dropdown-container", $dropdown).toggle();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

【问题讨论】：

手风琴做你想做的事吗？ jqueryui.com/demos/accordion
@KieranAndrews：听起来很像，只是当你点击其他地方时它不会自动关闭。
有个设置，我找一下。
对不起，手风琴对于我要找的东西来说有点多。我宁愿保持轻量级，不需要插件。
我的回答将完成您所要求的一切，而无需在您单击菜单项时关闭菜单（其他答案已错过......）。

标签： jquery toggle

【解决方案1】：

您基本上只需要隐藏除被切换的 div 之外的所有 div：

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $div = $("div.dropdown-container", $dropdown);
      $div.toggle();
      $("div.dropdown-container").not($div).hide();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

【讨论】：

@MatthewBlancarte 我相信这种行为最初是有意的。我以为他说的具体，但他的问题实际上并没有具体说明。
啊，好的。不用担心，这是有道理的！
@MatthewBlancarte Explosion Pills 是正确的。很抱歉，我在写问题时应该更清楚，而不是仅仅添加示例。

【解决方案2】：

您可以使用以下代码以智能且简单的方式实现：

<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

$(document).ready(function(){

 $(".dropdown-link").click(function(){
 $(".dropdown-container").slideUp('slow')
 $(this).closest('.dropdown').find('.dropdown-container').slideDown('slow');
 
 });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

工作示例链接：http://jsfiddle.net/NFTFw/1901/

【讨论】：

【解决方案3】：

尝试以下方法：

$(document).ready(function(){

  $("a.dropdown-link").click(function(e) {
    e.preventDefault();
    var $div = $(this).next('.dropdown-container');
    $(".dropdown-container").not($div).hide();
    if ($div.is(":visible")) {
        $div.hide()
    }  else {
       $div.show();
    }
});

   $(document).click(function(e){
       var p = $(e.target).closest('.dropdown').length
       if (!p) {
          $(".dropdown-container").hide();
       }
   });

});

DEMO

【讨论】：

【解决方案4】：

我让它尽可能短！编码愉快！

$(document).ready(function(){
  $(document).on("click", "a", function(event){
    $(this).siblings().show()
    $(this).parent().siblings().each(function(index,element){
       $(element).find(".dropdown-container:visible").hide();
    });
  });
});

演示：http://jsfiddle.net/NFTFw/60/

【讨论】：

【解决方案5】：

给你：

$("a.dropdown-link", $dropdown).click(function(e) {
  e.preventDefault();
  $(".dropdown-container").hide();
  $("div.dropdown-container", $dropdown).toggle();
  return false;
});

注意添加的行：

$(".dropdown-container").hide();

我们只是在切换我们想要的 div 之前隐藏所有的东西。

【讨论】：

那你不能再点击一个打开的div的链接来关闭它。

【解决方案6】：

    $(document).ready(function(){

      $('div.dropdown').each(function() {
        var $dropdown = $(this);

        $("a.dropdown-link", $dropdown).click(function(e) {
          e.preventDefault();
          $("div.dropdown-container").hide();
            if($("div.dropdown-container", $dropdown).hide()){
                $("div.dropdown-container", $dropdown).show();
            }else{
                $("div.dropdown-container", $dropdown).hide();
            }
          return false;
        });

    });

      $('html').click(function(){
        $("div.dropdown-container").hide();
      });

    });

http://jsfiddle.net/NFTFw/40/

【讨论】：

你不能点击一个打开的 div 链接再次关闭它； .hide() 先检查，然后临时切换不能解决这个问题。

【解决方案7】：

此代码应该可以解决问题，而无需使用其他库。 :)

http://jsfiddle.net/NFTFw/42/

$(document).ready(function(){

  var dd = $(".dropdown-container");

  $("a.dropdown-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    dd.hide();
    $(this).next().show();
  });

  $(document).click(function() {
    dd.hide();
  });

  dd.click(function(e) {
    e.stopPropagation();
  });
});

【讨论】：

您无法单击打开的 div 的链接以使用您的解决方案再次关闭它。