Question

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

我有6个div。在每个div里面是另一个带显示的div：none。

我想在jQuery中点击每个div所有6 div更改为显示：none并且div中的div点击显示在屏幕上。

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

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

我该怎么办？我也尝试使用show和hide并且不起作用

提前谢谢

Answer 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;}

Answer 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，则内部内容也将被隐藏。

Answer 3

Try this demo

据我了解你的问题，这就是你所需要的。

JS

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

   });
});

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

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

Answer 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");
   });
});

jQuery .css display：none

4 个答案: