Przełącznik Jquery (kliknij, aby pokazać jeden element div podczas ukrywania innych)

Question

Podstawową ideą jest to, że mam pęczek divów, w których każdy może być przełączany (pokaż/ukryj).

Kiedy jeden div jest przełączany, chciałbym, aby inne divy, które są obecnie pokazywane, aby ukryć, w ten sposób pozwalając na pokazanie tylko jednego diva na raz.

Dodatkowo chciałbym móc kliknąć poza elementem, aby ukryć również otwarty element div.

Po to, aby wszystko było bardziej zrozumiałe, podałem przykład, który aktualnie robi wszystko, co chcę, oprócz zamykania elementu div podczas otwierania innego (tylko jedna funkcjonalność otwartego elementu div).

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

Aktualizacja: Problem rozwiązany dziękuję za sugestie i poświęcenie czasu, aby mi pomóc.

Answer 1

rozwiązany http://jsfiddle.net/NFTFw/29/

W zasadzie wystarczy, aby ukryć wszystkie DIV z wyjątkiem jednego są przełączane.

Answer 2

Ten kod powinien wystarczyć, bez użycia dodatkowych bibliotek. :)

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

zobaczyć ten skrzypce ...

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

Answer 4

Proszę bardzo:

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

zanotować dodaną linię:

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

Po prostu ukrywamy wszystkie rzeczy przed przełączaniem żądanego elementu div.

Answer 5

Spróbuj wykonać następujące czynności:

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

Zrobiłem to tak krótki, jak to możliwe! Szczęśliwe kodowanie!

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

można używać przez inteligentny i łatwy sposób wdrożyć za pomocą poniżej kodu:

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

Przykładowe działanie Link: http://jsfiddle.net/NFTFw/1901/