滑动切换和切换文本时切换文本兄弟答案

【问题标题】：Toggle text sibilings when you slideToggle and toogle text滑动切换和切换文本时切换文本兄弟
【发布时间】：2012-11-02 10:31:41
【问题描述】：

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

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.

【问题讨论】：

char-more 不是彼此的兄弟姐妹。建议 - 将按钮/内容对包装在包装器中，并在包装器中使用 find()。单击按钮时的活动类可以轻松找到前一个以撤消它
你能详细说明一下或者提供一个例子吗？

标签： jquery toggle slidetoggle siblings

【解决方案1】：

使用以下 html 结构并为每个模块添加一个活动类，您可以简化如何找到激活的前一个模块（如果有的话），还可以使用 css 添加一些样式。阅读起来也比尝试调试不存在的兄弟姐妹和nestaAll's 更直观

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

})

【讨论】：

谢谢 Charlietfl，但是，它不能正常工作..这是一个小提琴。 jsfiddle.net/zRqYM/32
您的版本没有添加活动类，如果您使用所有代码并且我在我的代码中复制了“少读”而不是“多读”
如果您尝试切换单个按钮，它不会保持打开状态？？ jsfiddle.net/zRqYM/34
OK..所以你需要修改。我是在举例。试试toggleClass 和slideToggle。您可以检查活动类作为一种方法来确定文本也
喜欢这个？ $prevActive.find('.acontent').slideToggle(); $(this).text("Read Less") .closest('.widgetWrap').toggleClass('activeClass').find('.acontent').slideDown();