コンテンツを表示し、他のすべての関連オブジェクトを隠す

Question

私はこのスイッチ機能を持っているので、私は苦労しています。 何らかの理由で、メニューオプションをクリックするとすぐにメニューが消えています。これまでの唯一の解決策は、新しいdivに「内容」をカプセル化することです。 https://jsfiddle.net/yf62w1bp/1

のjQuery：

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

非作業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> 

ワーキング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> 

説明作業と非稼働バージョンのjsfiddle起こっている？

JSFiddleのfirstソリューションで動作するようにJSを変更するにはどうすればよいですか？

Answer 1

#menu2は、#content_1と#content_2の兄弟であるため、$.siblings()の使用はメニューを隠すものです。 #content_1と#content_2をそれぞれの要素にネストすることによって、それらはお互いの兄弟であり、すべてが意図どおりに機能します。

#menu2の兄弟が#content_1と#content_2の構造を保持する場合は、他の方法で非表示にする要素をグループ化します。ここでは、すべてのトグル可能なdivに.toggleのクラスを与え、それらを非表示にして、クリックしたタイトルに一致するものを表示します。

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

また、あなたはまだ$.siblings()を使用し、ちょうど兄弟としてオブジェクトに追加されることから#menu2を除外する:not()を使用することができます。しかし、これを行う場合、同じ方法で非表示にしたくない他の兄弟を後で導入する場合は、それらの要素をセレクタリストに追加する必要があります。

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