jQuery的切换（点击显示一个DIV，同时隐藏其他）(jQuery toggle (Click t

The basic idea is that I have a bunch of div's in which each can be toggled (show/hide).

When one div is toggled I'd like for other div's that are currently being shown to hide, thus only allowing one single div to be shown at a time.

In addition I'd like to be able to click outside the element to hide the open div as well.

Just to make things clearer I provided an example which currently does everything I want except closing a div when opening another (Only one div open at a time functionality):

$(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>

Answer 1:

你基本上只需要隐藏除一个被切换的所有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> 

Answer 2:

尝试以下方法：

$(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

Answer 3:

我做到了尽可能短！ 编码愉快！

$(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/

Answer 4:

您可以通过智能和简便的方法使用通过下面的代码来实现：

<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/

Answer 5:

干得好：

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

请注意添加一行：

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

拨动我们要在div之前我们只是隐藏所有的事情。

Answer 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/

Answer 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();
  });
});

文章来源: jQuery toggle (Click to show one div while hiding others)