显示内容并隐藏所有其他相关对象
显示内容并隐藏所有其他相关对象
提问于 2017-03-12 23:32:45
所以我有一个开关函数，我一直在纠结。但由于某种原因，我一单击菜单选项，菜单就会消失。到目前为止，唯一的解决方案是将“内容”封装在一个新的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>为什么会发生这种情况？
我将如何修改我的JS以使它在JSFiddle中适用于JSFiddle解决方案？
Stack Overflow用户
回答已采纳
发布于 2017-03-12 23:44:56
使用$.siblings()是隐藏菜单的原因，因为#menu2是#content_1和#content_2的兄弟。通过在它们自己的元素中嵌套#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()，只需使用: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42754482
复制相关文章
相似问题
腾讯云开发者
