0

ボタンをクリックすると、テキストが切り替わり、「もっと読む」または「もっと読む」と言います。他のボタンをクリックすると、前のボタンを元のテキスト「続きを読む」に戻したいです。

HTML：

  <div class="accordion">
  <div class="abtn">
    <input id="A-1" type="radio" value="A">
    <label class="chars" for="A-1">A</label>
    <div class="char-more">Learn More</div>
 </div>
<div class="acontent">Hello I am content A</div>

 <div class="abtn">
     <input id="B-1" type="radio" value="B">
     <label class="chars" for="B-1">B</label>
     <div class="char-more">Learn More</div>
 </div>
 <div class="acontent">Hello I am content B</div>

 <div class="abtn">
     <input id="C-1" type="radio" value="C">
     <label class="chars" for="C-1">C</label>
     <div class="char-more">Learn More</div>
   </div>
    <div class="acontent">Hello I am content B</div>
</div>

jQuery：

   $(".abtn .char-more").click(function(){
       $(this).closest('.abtn').nextAll(".acontent").first().slideToggle("fast")
       .siblings(".acontent:visible").slideUp('fast');
       $(this).html("Read Less");
       $(this).siblings(".char-more").html("Read More");
   });

JsFiddle。

4

1 に答える 1

1

次のhtml構造を使用し、各モジュールにアクティブクラスを追加すると、前のモジュールがアクティブ化されている場合（存在する場合）を簡単に見つけることができ、cssを使用して小さなスタイルを追加することもできます。また、存在しない兄弟をデバッグしようとするよりも、少し直感的に読むことができますnestaAll。

<div class="widgetWrap">
    <div class="abtn">
        <input id="A-1" type="radio" value="A">
        <label class="chars" for="A-1">A</label>
        <div class="char-more">Learn More</div>
     </div>
     <div class="acontent">Hello I am content A</div>
</div>

コードは次のようなパターンに従います。

$('.char-more').click(function(){ 
      var $prevActive=$('.activeClass');
     $prevActive.removeClass('activeClass').find('.char-more').text("Read Less");
     $prevActive.find('.acontent').slideUp(); 
     $(this).text("Read Less")
             .closest('.widgetWrap').addClass('activeClass').find('.acontent').slideDown(); 

})
于 2012-11-02T02:26:32.280 に答える