1

PHPによって生成された次のHTMLがあります。

<input><label><a href="#" class="show_hide 139">anchor 139</a></label>
<div class="slidingDiv 139" style="display: none;">content 139</div>

<a href="#" class="show_hide 140">anchor 140</a></label>
<div class="slidingDiv 140" style="display: none;">content 140</div>

<input><label><a href="#" class="show_hide 141">anchor 141</a></label>
<div class="slidingDiv 141" style="display: none;">content 141</div>

<input><label><a href="#" class="show_hide 142">anchor 142</a></label>
<div class="slidingDiv 142" style="display: none;">content 142</div>

ご覧のとおり、アンカーと div の 2 番目のクラスは、ループの各反復で同じです。jquery スニペットを使用してアンカーの div onclick を非表示/表示しているため、これが気に入りました。

<script type="text/javascript">
$(document).ready(function(){
        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){

    $(".slidingDiv").slideToggle();
    });
});
</script>

この jquery コードの問題点: (アンカーと div に) 追加する 2 番目のクラスが考慮されていません。実際、すべての div ではなく、アンカーに関連する特定の div を非表示にしたいと考えています。

お時間をいただき、ありがとうございました。

4

2 に答える 2

4

.nextマークアップのトリックを行うと思われるものを使用してみてください。

$(this).next('.slidingDiv').slideToggle();

完全なコード:

<style>
    .slidingDiv { display: none; }
</style>
<script>
  $(document).ready(function(){
      $('.show_hide').click(function(e){
          e.preventDefault(); //to prevent default action of link tag
          $(this).parent().next('.slidingDiv').slideToggle();
      });
});
</script>

注:ページのレンダリング後ではなく、ページのレンダリング時に非表示になるようにdisplay:noneスタイル ルールを追加しました。.slidingDiv

于 2013-06-21T14:19:59.673 に答える
1

を使用してこれを試してくださいnext：

$('.show_hide').click(function () {
    $(this).next(".slidingDiv").slideToggle();
});

あなたのコード:

$(".slidingDiv").slideToggle();

class ですべての div をスライドさせていましたslidingDiv。next()ただし、メソッドのみを使用して、現在のスコープでクリックされている要素の横にある div を考慮する必要があります。

于 2013-06-21T14:21:20.950 に答える