顯示內容並隱藏所有其他相關對象

Question

因此，我有這個開關功能，我很費力。 但由於某種原因，只要我點擊菜單選項，菜單就會消失。目前唯一的解決方案是我將「內容」封裝在一個新的div中。工作的jsfiddle和非工作版本：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> 

解釋這是爲什麼發生？

我將如何修改我的JS，以便它在JSFiddle中的first解決方案中工作？

Answer 1

您使用$.siblings()是隱藏菜單，因爲#menu2是#content_1和#content_2的兄弟。通過將#content_1和#content_2嵌套在它們自己的元素中，它們只是彼此的兄弟姐妹，因此它們都按預期工作。

如果要保留#menu2是#content_1和#content_2的兄弟的結構，請使用其他方法對要隱藏的元素進行分組。在這裏，我給了所有切換能力的div類.toggle，並隱藏它們，然後顯示與您點擊的標題相匹配的div。

$(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()，只需使用:not()從被添加到對象作爲同級排除#menu2。但是，如果你這樣做，如果你以後再引入任何其他兄弟，你不想以相同的方式隱藏，你需要將這些元素添加到選擇器列表中。

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