jQuery show click on click,隐藏多个嵌套div中的其他内容

Question

当我将它们放在多个div中时,它似乎不再起作用.我错过了什么？谢谢

演示:http://jsfiddle.net/HVfaA/206/

<div id="content">
<div id="first">
<div id="first-1">
<div id="first-2">
<div id="first-3">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
</div>
</div>
</div>
<div id="second">
<div id="second-1">
<div id="second-2">
<div id="second-3">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
</div>
</div>
</div>
</div>

$("div#second > div").hide();
var divs = $("#one, #two, #three, #four");
$('li a').on('click', function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});?

这个函数是Peter Ajtai提供的修改版本jQuery show div on click,隐藏其他版本

下面的原始问题:我正在尝试使用包含链接的单独div并显示div.当前单击链接时,隐藏的div不显示.谢谢你的帮助.这是关于jsfiddle的演示 - http://jsfiddle.net/HVfaA/184/

<div id="first">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
<br /><br />
<div id="second">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</div>

// Optional code to hide all divs
$("div#second").hide();

// Selector
var divs = $("#one, #two, #three, #four");

// Show chosen div, and hide all others
$("li a").click(function () 
{
$("#" + $(this).attr("class")).show();
divs.not(("#" + $(this).attr("class"))).hide();
});

Answer 1

问题是你已经包装了所有的div div#second然后隐藏了那个元素.因为他们的父级是隐藏的,所以没有子div(#one, #two, #three, #four)会出现.

如果您想隐藏所有div,请先尝试

// Optional code to hide all divs
$("div#second > div").hide();

这不是直接相关的,但作为一个旁边你可以divs.not(("#" + $(this).attr("class"))).hide();通过改变你隐藏你的div的顺序(隐藏它们,然后显示它)来放弃你.此外,由于您已经存储了它们,因为divs您也可以直接引用它们.

// Show chosen div, and hide all others
$("li a").click(function () {
    $(divs).hide();
    $("#" + $(this).attr("class")).show();
});?

查看更新的小提琴http://jsfiddle.net/HVfaA/190/