jQuery toggle (Klicken Sie, um ein div-Element, während Sie andere ausblenden)

Die grundlegende Idee ist, dass ich ein paar div ' s, in welcher jeder kann ein-und ausgeschaltet werden (show/hide).

Wenn man div umgeschaltet wird würde ich gerne für andere div ' s, die sind zurzeit zu verstecken, so erlauben, nur eine einzige div-werden auf einmal angezeigt.

Darüber hinaus möchte ich zu können, klicken Sie außerhalb des Elements zu verstecken, das offene div auch.

Nur um die Dinge klarer ich ein Beispiel, das derzeit tut alles, was ich will, außer den schließenden div-beim öffnen einer anderen (Nur ein div öffnen in einer Zeit, Funktionalität):

JS:

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

HTML:

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

Tut Akkordeon tun, was Sie wollen? jqueryui.com/demos/accordion
Wie es klingt, außer dass es nicht automatisch schließen, wenn Sie klicken Sie irgendwo anders.
Gibt es eine Einstellung für, dass, lassen Sie mich es zu finden.
Sorry, das Akkordeon ist ein bisschen viel für das, was ich Suche. Ich würde lieber halten Sie ist leicht, ohne die Notwendigkeit für Plug-ins.
Meine Antwort wird alles tun, was Sie gefragt haben, ohne schließen des Menüs, wenn Sie auf ein Menüelement klicken, (die anderen Antworten übersehen haben...).

InformationsquelleAutor walker2238 | 2012-08-02

jquery toggle

Du im Grunde nur verstecken muss alle divs, außer dem einen, ausgeschaltet wird:

JS:

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

HTML:

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

Dieser buggy ist, immer noch. Wenn Sie auf ein Menüelement klicken, wird das Menü zu schließen...
Ich glaube, dass Verhalten gedacht war ursprünglich. Ich dachte, er sagte es ausdrücklich, aber seine Frage eigentlich nicht geben.
Ah, okay. Keine Sorge, das macht Sinn!
Explosion Pillen korrekt ist. Sorry für die Verwirrung, ich hätte mehr klar, beim schreiben der Frage statt einfach nur mit dem Beispiel.

InformationsquelleAutor Explosion Pills

Versuchen Sie Folgendes:

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

Dieser arbeitete für mich. Danke.

InformationsquelleAutor undefined

Machte ich es so kurz wie möglich! Happy coding!

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

InformationsquelleAutor Dom

Können Sie durch intelligente und einfache Weise zu implementieren, indem Sie mit folgenden code :

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

JS:

$(document).ready(function(){

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

});

HTML:

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

Arbeiten Beispiel-Link : http://jsfiddle.net/NFTFw/1901/

InformationsquelleAutor SantoshK

0

Hier gehen Sie:
```
$("a.dropdown-link", $dropdown).click(function(e) {
  e.preventDefault();
  $(".dropdown-container").hide();
  $("div.dropdown-container", $dropdown).toggle();
  return false;
});
```
Beachten Sie die hinzugefügte Zeile:
```
$(".dropdown-container").hide();
```
Wir einfach ausblenden all die Dinge, die vor dem ein-und ausschalten der div wir wollen.
- Dann können Sie nicht auf den link klicken, der eine offene div auch wieder schließen.
InformationsquelleAutor Henrik Volckmer

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

Sie können nicht auf einen offenen div-link, um es zu schließen wieder; die .hide() überprüfen Sie zuerst, und dann den provisorischen Knebel nicht das problem lösen.

InformationsquelleAutor Akam

Dieser code sollte den trick tun, ohne die Verwendung von zusätzlichen Bibliotheken. 🙂

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

Sie können nicht auf einen offenen div-link, um es zu schließen wieder mit Ihrer Lösung.

InformationsquelleAutor Matthew Blancarte

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.