jQuery - Klicken Sie auf ein div, schließen Sie alle anderen Ausgabe

Question

Ich habe eine Reihe von divs, die, wenn ich auf eines klicke, es öffnen sollte und schließen alle anderen, die offen sind. Sollte nur ein offenes div wenn überhaupt sein. Ich habe Schwierigkeiten, den zu schließen, auf den ich vom Schließen klicke. Hat jemand irgendwelche Gedanken? Javascript und HTML folgen:

$('.m_box').hide(); 
    $('.a_box').hide(); 

    $('#m2012').click(function(){ 
     //$('.m_box').hide(); 
     $('#m2012_box').toggle(); 
    }); 

    $('#m2011').click(function(){ 
     //$('.m_box').hide(); 
     $('#m2011_box').toggle(); 
    }); 

    $('#m2010').click(function(){ 
     //$('.m_box').hide(); 
     $('#m2010_box').toggle(); 
    }); 

    <div id="m2012" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;"> 
     <div id="m2012_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;"> 
      <div class="list_header"> 
       <p>2012</p> 
      </div> 
      <div class="items"> 
       <div class="list_item"> 
        Milestone 1 
       </div> 
       <div class="list_item"> 
        Milestone 2 
       </div> 
       <div class="list_item"> 
        Milestone 3 
       </div> 
       <div class="list_item"> 
        Milestone 4 
       </div> 
       <div class="list_item"> 
        Milestone 5 
       </div> 
       <div class="list_item"> 
        Milestone 6 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id="m2011" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;"> 
     <div id="m2011_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;"> 
      <div class="list_header"> 
       <p>2011</p> 
      </div> 
      <div class="items"> 
       <div class="list_item"> 
        Milestone 1 
       </div> 
       <div class="list_item"> 
        Milestone 2 
       </div> 
       <div class="list_item"> 
        Milestone 3 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id="m2010" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;"> 
     <div id="m2010_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;"> 
      <div class="list_header"> 
       <p>2010</p> 
      </div> 
      <div class="items"> 
       <div class="list_item"> 
        Milestone 1 
       </div> 
       <div class="list_item"> 
        Milestone 2 
       </div> 
       <div class="list_item"> 
        Milestone 3 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Um geklickt div des Kindes auszuschließen sind (die nur als ich sehe) vom Wähler Sie not verwenden können:

$('#m2012, #m2011, #m2010').click(function() { 
    $('.m_box').not($(this).children().show()).hide(); 
}); 

UPD: modifiziert, um den Code, so dass es das Kind öffnet.

Answer 2

Sie die anderen divs Überprüfung schließen können, wenn sie mit dem geöffneten: sichtbar Selektor http://api.jquery.com/visible-selector/

Answer 3

Sie können mit jQuery zu fadeIn und fadeOut die divs, auf Click-Ereignis versuchen. Hier ist ein Beispiel;

$('#clickme').click(function() { 
    $('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

Das bedeutet, wenn das div klicke ich angeklickt wird, wird es ausgeblendet oder verblasst in dem Buch div

Answer 4

Sie sollten die gemeinsame Klasse verwenden und die sichtbar alle auszuwählen und sie verstecken zuerst .

$('.m_box').click(function(){ 
    $('.m_box:visible').hide(); 
    $(this).show(); 
}); 

Answer 5

Es gibt zwei große vorgefertigte jQuery-Bibliotheken, die damit umgehen können:

• jQuery Tools (speziell die tabs Funktionalität, die als accordion umgesetzt werden können)
• jQuery UI die auch eine hat accordion Funktion

jQuery Tools ermöglichen f oder die größte Flexibilität, und die Umsetzung sollte relativ einfach sein. jQuery UI erzwingt ein gewisses Styling, daher ist Tools wahrscheinlich der richtige Ansatz, wenn Sie eine Bibliothek verwenden möchten.

Answer 6

Versuchen:

$('.list_header').click(function() { 
    $(this).parent().parent().siblings().find('.items').hide(); 
    $(this).siblings().show();  
});​ 

Beweis: http://jsfiddle.net/iambriansreed/J97Kq/

Meine Geige Ihre Inline-CSS aus Gründen der Übersichtlichkeit entfernt.

Answer 7

sollten Sie einen Selektor alle div mit einem bestimmten Index wie diese zu schließen, schließen Sie diese Wähler alle divs mit einem Index größer als 1.

$('#m2012').click(function(){ 

$('#m2012_box').toggle(); 

     //index a integer value 

    $("div:gt(1)").hide(); 

});