1

私は次のことをしようとしています：

  • 私は6divを持っています。各divの中には、display：noneを持つ別のdivがあります。

jQueryで、各divをクリックすると、6つのdivがすべてdisplay：noneに変更され、div内のdivがクリックされて画面に表示されます。

このフィドルを確認してくださいhttp://jsfiddle.net/Weinz/xaMfk/2/

発生する唯一のことは、すべてが表示されます：なし

私に何ができる？表示と非表示も試してみましたが、機能しません

前もって感謝します

4

4 に答える 4

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 に答える
1

上記の回答が得られてうれしいです。@Zoltanのアプローチはあなたのために働くことができるように見えます。また、jqueryとcssが削減されるため、divにクラスを追加することも検討します。

<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 に答える
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 に答える