Inhalt anzeigen und alle anderen verwandten Objekte ausblenden

Question

Also ich habe diese Schalterfunktion, mit der ich struggeling bin. Aber aus irgendeinem Grund verschwindet das Menü, sobald ich auf eine Menüoption klicke. Die einzige Lösung bisher ist, dass ich den "Inhalt" in einem neuen Div kapseln. jsfiddle der Arbeits- und Nicht-Arbeitsversion: https://jsfiddle.net/yf62w1bp/1

JQuery:

$(document).ready(function(){ 
    $("a.menu2").click(function() { 
     var clicked = $(this).attr('title'); 
     $("#"+clicked).show().siblings().hide(); 
    }); 
}); 

Nichtarbeits HTML:

<div id="menu2"> 
    <a href="#" title="content_1" class="menu2">menu test1</a> 
    <a href="#" title="content_2" class="menu2">menu test2</a> 
</div> 
<div id="content_1"><p>content test1</p></div> 
<div id="content_2"><p>content test2</p></div> 

Arbeits HTML:

<div id="menu2"> 
    <a href="#" title="content_1" class="menu2">menu test1</a> 
    <a href="#" title="content_2" class="menu2">menu test2</a> 
</div> 
<div> 
    <div id="content_1"><p>content test1</p></div> 
    <div id="content_2"><p>content test2</p></div> 
</div> 

Erklärung, warum dies ist vorkommend?

Wie würde ich mein JS ändern, damit es für die first Lösung im JSFiddle funktioniert?

Answer 1

Ihre Nutzung von $.siblings() ist, was das Menü versteckt, weil #menu2 ein Geschwister von #content_1 und #content_2 ist. Durch das Verschachteln von #content_1 und #content_2 in ihrem eigenen Element sind sie nur Geschwister voneinander, so dass alles wie gewünscht funktioniert.

Wenn Sie die Struktur beibehalten möchten, wo #menu2 ein Geschwister von #content_1 ist und #content_2, dann eine andere Methode zur Gruppe verwenden, um die Elemente, die Sie ausblenden möchten. Hier habe ich allen toggle-fähigen divs eine Klasse von .toggle gegeben und diese stattdessen ausgeblendet und dann diejenige angezeigt, die mit dem Titel übereinstimmt, auf den du geklickt hast.

$(document).ready(function() { 
 
    $("a.menu2").click(function() { 
 
    var clicked = '#' + $(this).attr('title'); 
 
    $('.toggle:not('+clicked+')').hide(1000); 
 
    $(clicked).show(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu2"> 
 
    <a href="#" title="content_1" class="menu2">menu test1</a> 
 
    <a href="#" title="content_2" class="menu2">menu test2</a> 
 
</div> 
 
<div id="content_1" class="toggle"> 
 
    <p>content test1</p> 
 
</div> 
 
<div id="content_2" class="toggle"> 
 
    <p>content test2</p> 
 
</div>

Alternativ können Sie noch $.siblings() verwenden und nur :not() verwenden, um auszuschließen #menu2 aus als Geschwister zu dem Objekt hinzugefügt werden. Aber wenn Sie dies tun, wenn Sie später weitere Geschwister einführen, die Sie nicht auf die gleiche Weise ausblenden möchten, müssen Sie diese Elemente zur Auswahlliste hinzufügen.

$(document).ready(function() { 
 
    $("a.menu2").click(function() { 
 
    var clicked = '#' + $(this).attr('title'); 
 
    $(clicked).show(1000).siblings(':not(#menu2)').hide(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu2"> 
 
    <a href="#" title="content_1" class="menu2">menu test1</a> 
 
    <a href="#" title="content_2" class="menu2">menu test2</a> 
 
</div> 
 
<div id="content_1"> 
 
    <p>content test1</p> 
 
</div> 
 
<div id="content_2"> 
 
    <p>content test2</p> 
 
</div>