Question

单击按钮时，我希望文本切换并说“阅读更多”或“少读”。如果我点击另一个按钮，我希望上一个按钮返回原始文本“阅读更多”

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

Answer 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(); 

})

在slideToggle和切换文本时切换文本兄弟

1 个答案: