Jquery 显示内容并隐藏所有其他相关对象

所以我有一个开关函数，我正在努力使用它。 但由于某种原因，只要我单击一个菜单选项，菜单就会消失。到目前为止，唯一的解决方案是将内容封装在一个新的div.jsfiddle工作和非工作版本中：

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>

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

工作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>

<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以使其适用于JSFIDLE中的第一个解决方案？

您使用$.sibles是隐藏菜单的原因，因为menu2是content_1和content_2的同级。通过将content_1和content_2嵌套在它们自己的元素中，它们只是彼此的兄弟，因此它们都可以按预期工作

如果要保留menu2是content_1和content_2同级的结构，请使用其他方法对要隐藏的元素进行分组。在这里，我为所有可切换的div设置了一个.toggle类，并将其隐藏，然后显示与您单击的标题匹配的div

$document.readyfunction{ $a.menu2.clickfunction{ var clicked=+$this.attr'title'； $'.toggle:不“+单击+.hide1000； $1000； }; }; 内容测试1

内容测试2