Переключать одноуровневые элементы текста при скольженииПереключать и переключать текст

При нажатии кнопки я хотел бы, чтобы текст переключался и говорил «читать больше» или «читать меньше». Если я нажму другую кнопку, я бы хотел, чтобы предыдущая кнопка вернулась к исходному тексту «читать дальше».

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.


toggle jquery slidetoggle siblings
person user992731    schedule 02.11.2012    source источник
comment
char-more не являются братьями и сестрами друг другу. Предложение - заключить пары "кнопка/контент" в оболочку и использовать find() внутри оболочки. Активный класс при нажатии кнопки позволяет легко найти предыдущий, чтобы отменить его.   -  person charlietfl    schedule 02.11.2012
comment
Можете ли вы немного уточнить или привести пример, пожалуйста?   -  person user992731    schedule 02.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Используя следующую структуру 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(); 

})
person charlietfl    schedule 02.11.2012
comment
Спасибо, Charlietfl, однако он не работает должным образом. Вот скрипка. jsfiddle.net/zRqYM/32 - person user992731; 02.11.2012
comment
ваша версия не добавляет активный класс, работает, если вы используете весь код, и я продублировал «Читать меньше» в своем коде вместо «Читать больше». - person charlietfl; 02.11.2012
comment
Если вы попытаетесь переключить отдельную кнопку, она не останется открытой?? jsfiddle.net/zRqYM/34 - person user992731; 02.11.2012
comment
ОК .. так что вам нужно будет изменить. Я приводил пример. Попробуйте с toggleClass и slideToggle. Вы можете проверить активный класс как один из методов определения текста. - person charlietfl; 02.11.2012
comment
Как это? $prevActive.find('.acontent').slideToggle(); $(this).text(Читать меньше) .closest('.widgetWrap').toggleClass('activeClass').find('.acontent').slideDown(); - person user992731; 02.11.2012