0

解決できない厄介な問題があります。

ネストされたdivがあり、ユーザーがリンクをクリックしたときに表示/非表示にします。一度にすべてのdiv。

divにIDを割り当てることができないため、クラスで割り当てる必要があります。

<a href="#" id="showhide">Show more</a>

<div class="more">
<div class="more1">
<h2>Some title</h2>
<p>Some text</p>
</div>

<div class="more2">
<h2>Some title</h2>
<p>Some text</p>
</div>

<div class="more3">    
<h2>Some title</h2> 
<p>Some text</p>
</div>

</div>​

これが私のhtml構造のフィドルです。 http://jsfiddle.net/56jdL/1/

ありがとう！

4

2 に答える 2

0

次を使用して、最初にdivを非表示にできますcss。

.more { display: none }

または jQuery:

$('.more').hide()

そして、toggleメソッドを使用します：

$(function() {
   // $('.more').hide() 
   $('#showhide').click(function(e){
      e.preventDefault();
      $('.more').toggle()
   })
})

http://jsfiddle.net/J2YgE/

于 2012-12-10T08:12:33.893 に答える
0

これを試して ：

$("#showhide").on('click', function(){
    $(".more").children("div").slideToggle();
    return false;
});

デモ

編集

div を選択的に切り替えるには、div を選択できるクラスを指定します。

<div class="hideMe">
    ...
</div>

次に、次の jQuery はそれらの div でのみ動作します。

$("#showhide").on('click', function(){
    $(".more").children("div.hideMe").slideToggle();
    return false;
});

デモ

編集2

より完全なコードで動作するバージョンは次のとおりです。

$(".showhide").on('click', function() {
    $(this).closest(".vrsticaoglas").find(".more").children("div").slideToggle();
    return false;
});

デモ

于 2012-12-10T08:15:28.470 に答える