jQuery .css 显示：无答案

【问题标题】：jQuery .css display:nonejQuery .css 显示：无
【发布时间】：2012-11-14 22:14:51
【问题描述】：

我正在尝试执行以下操作：

我有 6 个 div。每个 div 内部都有另一个带有 display:none 的 div。

当我点击每个 div 时，我想在 jQuery 中执行所有 6 个 div 更改为 display:none 并且 div 内的 div 点击显示在屏幕上。

检查这个小提琴http://jsfiddle.net/Weinz/xaMfk/2/

唯一发生的事情就是显示：无

我能做什么？我也尝试显示和隐藏，但不起作用

提前谢谢你

【问题讨论】：

提示：你不能在不隐藏子元素的情况下隐藏父元素。
好的。不知道那个。打算再试一次。
当你隐藏父级时，子级也将自动隐藏。
感谢您的回答。现在可以了！ :D
jsfiddle.net/Weinz/xaMfk/10 我就是这样做的

标签： javascript jquery

【解决方案1】：

很高兴您在上面得到了答案。 @Zoltan 的方法看起来对你有用。我还会考虑向 div 添加类，因为它会减少 jquery 和 css。

<div class="outerDiv" id="box1">Box1</div>
<div id="cont1" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box2">Box2</div>
<div id="cont2" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box3">Box3</div>
<div id="cont3" class="innerDiv" style="display:none"><p>Some text and img</p></div>    
<div class="outerDiv" id="box4">Box4</div>
<div id="cont4" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box5">Box5</div>
<div id="cont5" class="innerDiv" style="display:none"><p>Some text and img</p></div>



$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
});
.outerDiv{border: 1px solid;} 
div,div p {display:inline;}

【讨论】：

我的错误，但我只想显示 div id="cont1"，如果我单击 box1 等等，然后使用下一个框。你的代码向我展示了每个“cont”div
你最终是使用这个还是只保留你所拥有的？
我确实最终使用了您的小提琴，但添加了新功能，请查看jsfiddle.net/Weinz/jdFRw/4
代码少了很多吧？看起来不错……很高兴它对你有用。如果您能将此标记为答案，将不胜感激

【解决方案2】：

<div id="box1" class="outer">Box1<div id="cont1" class="inner" style="display:none"><p>Some text and img</p></div></div>
<div id="box2" class="outer">Box2<div id="cont2" class="inner" style="display:none"><p>Some text and img</p></div></div>
<div id="box3" class="outer">Box3<div id="cont3" class="inner" style="display:none"><p>Some text and img</p></div></div>

$(function(){
    $(".outer").click(function(){  
        var id= this.id;
        $("#"+id+" .inner").show(); 
//user toggle instead of show if you need toggle

   });

});

如果您打算在用户单击父 div 时显示每个隐藏的 div，则此代码会帮助您。 如果你隐藏了父div，那么里面的内容也会被隐藏。

【讨论】：

【解决方案3】：

Try this demo

据我了解，这正是您所需要的。

$(function(){
   $("#wrapper").on('click', 'div.maindiv',function(){
       $(this).find('div.innerdiv').show();
       $(this).siblings('div.maindiv').hide();

   });
});

这将显示您单击的 div 的任何内部 div 内容，并将隐藏同一元素级别的其他 div。 不要忘记试用演示并提供反馈。（链接在答案的开头）

希望这能解决您的问题。如果您有任何问题，请随时提问。谢谢。

【讨论】：

当我点击它时，我还需要隐藏“box1”。当我单击一个框时，我想隐藏所有“框”并显示它是子 div。但是你们告诉我，如果父母隐藏了孩子也隐藏了
是的。如果我们要隐藏父 div，就不可能显示子 div。必须显示父 div

【解决方案4】：

试试这样的，jsfiddle:

// HTML:
<div id="box1">Box1<div id="cont1" style="display:none"><p>Some text and img</p></div></div>
<div id="box2">Box2<div id="cont2" style="display:none"><p>Some text and img</p></div></div>
<div id="box3">Box3<div id="cont3" style="display:none"><p>Some text and img</p></div></div>
<div id="box4">Box4<div id="cont4" style="display:none"><p>Some text and img</p></div></div>
<div id="box5">Box5<div id="cont5" style="display:none"><p>Some text and img</p></div></div>

// CSS:
div {
    display:inline;
}
#box1 {border: 1px solid;}
#box2 {border: 1px solid;}
#box3 {border: 1px solid;}
#box4 {border: 1px solid;}
#box5 {border: 1px solid;}

// JS:
$(function(){
   $("#box1").click(function(){
       $(this).css("display","");
       //$("#box1").css("display","none");
       $("#box2").css("display","none");
       $("#box3").css("display","none");
       $("#box4").css("display","none");
       $("#box5").css("display","none");
   });
});

【讨论】：