1

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

  • 我有 6 个 div。在每个 div 中都有另一个带有 display:none 的 div。

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

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

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

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

先感谢您

4

4 回答 4

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;}
于 2012-09-27T17:19:48.613 回答
1

试试这个演示

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

JS

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

   });
});

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

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

于 2012-09-27T17:38:19.763 回答
1 
<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，那么内部内容也将被隐藏。

于 2012-09-27T17:33:21.250 回答
0

尝试这样的事情，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");
   });
});
于 2012-09-27T17:10:03.650 回答