Geschwister der Eltern außer Elemente verschwinden geklickt in jQuery

Question

Ich versuche, eine div # Kontrollen auf Vollbild, wenn eine Taste im Inneren angeklickt wird und macht alle andere div # Kontrollen mit gleich Eltern, div # Tasten, verschwinden .

Mein HTML:

  <div id="testpile" class="inner cover"> 
       <div id="buttons" class="buttons"> 
        <div id="controls" class="col-md-4 rat"> 
         <h1>Rationelt</h1> 
         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> 
         <a id="1" class="btn btn-group btn-default" role="button">Rationelt</a> 
        </div> 
        <div id="controls" class="col-md-4 emo"> 
         <h1>Emotionelt</h1> 
         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> 
         <a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a> 
        </div> 
        <div id="controls" class="col-md-4 per"> 
         <h1>Personligt</h1> 
         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> 
         <a id="3" class="btn btn-group btn-default" role="button">Personligt</a> 
        </div> 
       </div> 
      </div> 

Meine jQuery:

<script type="text/javascript"> 
    $('.btn-group').on('click', function() { 
     $(this).parent().toggleClass('col-md-4 col-md-12'); 
     $(this).parent().siblings().toggleClass('col-md-4 col-md-0'); 
    }); 
</script> 

Ich bin ziemlich sicher, dass das Problem, das ich habe ist, dass ich nicht bei der Ausrichtung das Recht div gelungen, aber ich habe alles versucht, um es selbst zu lösen und leider nicht in der lage.

Answer 1

Ich glaube nicht, dass Sie etwas zu den Geschwistern des Elternteils tun, außer ihnen nur eine Spaltenklasse zu geben. Von was ich verstehe, was Sie hinzufügen müssen, ist .hide() Methode. Dadurch werden die divs ausgeblendet, die Sie ausblenden möchten. Hier

ist eine Verbindung von der jquery api, die Ihnen helfen und geben Beispiele link

Answer 2

entfernen, dass id controls. IDs sollten nicht wiederholt werden, verwenden Sie dort Klasse wie;

<div class="controls col-md-4 rat"> 

und verwenden Sie JS wie;

$('.btn-group').on('click', function() { 
    $(".controls").hide(); 
    $(this).parents(".controls").show(); 
}); 

Answer 3

Als Neben der Steuer ID kopiert, einfach die Anzeige der Eltern Geschwister wechseln sie zu Einblenden/Ausblenden auf jede Taste klicken: Targeting

$('.btn-group').on('click', function() { 
    $(this).parent().siblings().toggle(); 
}); 

Answer 4

Sie das Recht div trotz die ungültigen doppelten IDs. Die Verwendung von toggleClass ist das Problem, vor allem nach dem ersten Klick, da es jede Klasse aus dem aktuellen Zustand schaltet, die inkonsistente Ergebnisse abhängig von der Reihenfolge der Benutzer auf jedes Element klickt - Sie scheinen auch Raster zu schalten Spaltendeklarationen, von denen ich nicht sicher bin, was Sie vorhaben?

Unten habe ich den Code geändert addClass und removeClass explizit zu verwenden (und gemacht haben ‚versteckte‘ noch leicht sichtbar, so dass Sie die Wirkung der nachfolgenden Klicks sehen)

$('.btn-group').on('click', function() { 
 
     $(this).parent().removeClass('hidden'); 
 
     $(this).parent().siblings().addClass('hidden'); 
 

 
    });

.hidden {opacity:0.1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testpile" class="inner cover"> 
 
       <div id="buttons" class="buttons"> 
 
        <div id="controls" class="col-md-4 rat"> 
 
         <h1>Rationelt</h1> 
 
         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> 
 
         <a id="1" class="btn btn-group btn-default" role="button">Rationelt</a> 
 
        </div> 
 
        <div id="controls" class="col-md-4 emo"> 
 
         <h1>Emotionelt</h1> 
 
         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> 
 
         <a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a> 
 
        </div> 
 
        <div id="controls" class="col-md-4 per"> 
 
         <h1>Personligt</h1> 
 
         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> 
 
         <a id="3" class="btn btn-group btn-default" role="button">Personligt</a> 
 
        </div> 
 
       </div> 
 
      </div>