Umschalten der Sichtbarkeit von gleichgeordneten Elements jquery

Ich habe mehrere divs auf einer Seite. Jedes div hat eine überschrift, die ich klicken kann zum Umschalten der Sichtbarkeit der entsprechenden div. Die divs sind festgelegt display:none standardmäßig.

Habe ich verwendet #ids in die Klick-Funktionen der einzelnen divs , aber da habe ich mehrere divs auf der gleichen Seite. Ich würde wollen, zu einem einzigen .class so, dass ich eine einzelne Klasse so eine einzige Funktion steuert die Sichtbarkeit.

Ich vermute, ich würde dann verwenden müssen .parent und .sibling Klassen, dies zu tun.

Unten ist ein Auszug von meinem code:
HTML:

<div> 
    <legend>
        <a id="show_table" class="show_table" href="#">
            <span id="plus_minus"></span>Div
        </a>
    </legend>
    <div class="toshow" id="toshow">Div to be shown</div>
</div>

JS:

$('#show_table').click(function(){
    $("#toshow").slideToggle(); 
})

Ich würde denken, um diese effizienter zu gestalten, so dass ich nicht zu tun haben, das für jedes div mit der #ids, ich würde wissen wollen, wie ein einzelnes .class wahrscheinlich Eltern und Geschwister es diese zu machen.

Als Ergänzung, ich möchte eine minus - /plus-Zeichen Umschalten der Funktionalität auf die plus_minus span. Ich hatte die gleichen arbeiten mit den einzelnen ids . Wie würde ich in der Lage sein, dies zu erreichen mit einer einzigen .class. Ich versuchte dies mit unter:

$('.div_show').click( function(){

$(this).parent().next().slideToggle();

if($(this).parent().next().is(':visible'){

$(this).closest('span').find('plus_minus').text('+');

}

else {

$(this).closest('span').find('plus_minus').text('-');

}


 });

Aber es scheint nicht zu funktionieren.

Vorschläge, wie dies zu erreichen +/- toggle-Funktionalität geschätzt.

jsfiddle.net/vgguf

InformationsquelleAutor watkib | 2012-09-25

3

Warum nicht versuchen, diese
```
$('.show_table').click(function(){

    $(this).parent().next().slideToggle();

})
```
AKTUALISIERTEN CODE

Weil Sie mit SlideToggle die änderungen an der DOM ist nicht leicht aktualisiert.. Also Sie haben, um die Sichtbarkeit der Themen in der callback-Funktion von es..

Versuchen, diesen code
```
$('.show_table').click(function(){
      var $elem = $(this);
      $(this).parent().next().slideToggle('slow', function() {
          if($(this).is(':visible')){
             $elem.find('span').html('+');
          }
          else{
             $elem.find('span').html('-');
          }              
      });
})    
```
AKTUALISIERT FIDDLE
- Vielen Dank, das hat funktioniert, allerdings musste ich entfernen <hr/> nach der legend wie es war, den nächsten Geschwisterknoten nach der Legende. Ist es möglich, übergeben Sie eine variable in der next() Methode sagen wie next(2) also es geht das 2. Nächstes element?
- Sie können pass next('div') wählen Sie das nächste div-element
- Danke, werde versuchen, dass. Sehen Sie, bearbeitet die Frage über die plus-minus - toggle Funktionalität.
- Ich habe meinen Beitrag aktualisiert.. Check it !!
- Dank probieren Sie es aus.
InformationsquelleAutor Sushanth --

$('#show_table').click(function(){
    $(this).parent().parent().find("div.toshow").slideToggle();
});

InformationsquelleAutor Dmytro Zarezenko

2

Können Sie .parent(), um die legend element, und .next(), um die folgenden Geschwister (das ist Ihre div):
```
$(".show_table").click(function () {
    $(this).parent().next().slideToggle();
});
```
Wenn Ihr markup ist wahrscheinlich zu ändern in der Struktur, Sie könnten ein wenig flexibler gestalten, indem Sie mit .am nächsten() statt .parent(), und dann mit .find():
```
$(".show_table").click(function () {
    $(this).closest("div").find(".toshow").slideToggle();
});
```
Hier ein Beispiel.

InformationsquelleAutor James Allardice

Können Sie versuchen, diese

$('.show_table').on('click', function(){
   $(this).closest('div').find(".toshow").slideToggle();

}) ;

oder Sie können eine Klasse auf Ihrem div-container für Titel und div wie

<div class='container'> 
  <legend>
     <a id="show_table" class="show_table" href="#">
       <span id="plus_minus"></span>Div
     </a>
   </legend>

   <div class = "toshow" id = "toshow" >Div to be shown</div>

 </div>

Dann können Sie versuchen, diese

$('.show_table').on('click', function(){
   $(this).closest('.container').find(".toshow").slideToggle();

}) ;

InformationsquelleAutor Yograj Gupta

1

Können Sie versuchen, diese:
```
$('.show_table').each(function(){
    $(this).parent().parent().find('.my-toggle-class').slideToggle(); 
});
```
- Das wird nicht funktionieren. Die Eltern, die legend element und das toggle-element ist nicht ein Abkömmling dieses.
- ja.. danke.. ich habe den code geändert
InformationsquelleAutor Matei Mihai

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.