jQuery show div单击，将其他人隐藏在多个嵌套的divs中

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的修改版本，请单击，隐藏其他版本

下面的原始问题：我正在尝试使用包含链接的单独divs并显示Divs。当前，当单击链接时，隐藏的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

问题是您将所有Divs包裹在div#second中，然后隐藏了该元素。因为他们的父母被隐藏了，所以没有一个孩子Divs（#one, #two, #three, #four）出现。

如果您想隐藏所有的divs，以尝试

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

这不是直接相关的，但是作为旁边，您可以通过移动隐藏divs的顺序（隐藏全部，然后显示一个）来删除divs.not(("#" + $(this).attr("class"))).hide();。另外，由于您已经将它们存储为divs，也可以直接引用它们。

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

请参阅更新的小提琴http://jsfiddle.net/hvfaa/190/

Answer 2

只需在点击处理程序中显示您的DIV，它将起作用：

$("div#second").show();

演示：http：//jsfiddle.net/hvfaa/191/

Answer 3

css：

.Main-Div {position: relative; left: -9999px;}
.Inner-Div {position: relative; left: 9999px;}

javaScript：

// Optional code to hide all divs
$("div#second > div").addClass('Main-Div');
// Selector
var divs = $("#one, #two, #three, #four");
// Show chosen div, and hide all others
$('li a').on('click', function () {
    $(divs).removeClass('Inner-Div');
    $("#" + $(this).attr("class")).addClass('Inner-Div');
});

小提琴