Jquery toggle (Bấm để hiển thị một div trong khi ẩn những người khác)

Question

Ý tưởng cơ bản là tôi có một loạt các div trong đó mỗi cái có thể được bật (hiển thị/ẩn).

Khi một div bị tắt, tôi muốn các div khác hiện đang được hiển thị để ẩn, do đó chỉ cho phép một div duy nhất được hiển thị cùng một lúc.

Ngoài ra, tôi muốn có thể nhấp vào bên ngoài phần tử để ẩn div mở.

Chỉ để làm cho mọi thứ rõ ràng hơn, tôi đã cung cấp ví dụ hiện đang làm mọi thứ tôi muốn trừ khi đóng div khi mở khác (Chỉ có một div mở tại một chức năng thời gian).

http://jsfiddle.net/walker2238/NFTFw/27/

Cập nhật: Vấn đề giải quyết cảm ơn bạn đã góp ý và dành thời gian để giúp tôi ra ngoài.

Answer 1

Giải xong trong http://jsfiddle.net/NFTFw/29/

Bạn về cơ bản chỉ cần để ẩn tất cả các div trừ một đang được toggled.

Answer 2

Mã này nên thực hiện thủ thuật mà không cần sử dụng thư viện bổ sung. :)

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

Answer 3

thấy fiddle này ...

http://jsfiddle.net/SDaCu/1/

Answer 4

Ở đây bạn đi:

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

Lưu ý dòng thêm:

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

Chúng tôi chỉ ẩn tất cả mọi thứ trước khi chuyển đổi div chúng tôi muốn.

Answer 5

Hãy thử như sau:

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

tôi đã làm cho nó càng ngắn càng tốt! Chúc mừng mã hóa!

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

Demo: http://jsfiddle.net/NFTFw/60/

Answer 8

Bạn có thể sử dụng bằng cách thông minh và dễ dàng để thực hiện bằng cách sử dụng mã dưới đây:

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

Ví dụ làm việc Link: http://jsfiddle.net/NFTFw/1901/