Отключить текст кнопки переключения слайдов при закрытии

Question

Хорошо, поэтому у меня есть следующий код, написанный для кнопки «читать дальше». Нажатие на него переключает div и изменяет «читать больше» на «читать меньше». Нажатие на другое закрывает другой открытый div, а также переключает текст в соответствующую формулировку.

ОДНАКО, я не могу понять, как вернуть текстовый переключатель в «читать больше», когда я нажимаю ту же кнопку переключения.

Пример далее х читать далее Y

Если нажать на ссылку «читать далее х», он переключает х спрятан DIV и кнопка становится «читать меньше х». Когда я нажимаю «читать меньше x», он переключает div BUT остается как «читать меньше x», а не возвращаться.

Я попытался перетащить фрагмент $ (this) .text в различные части функции, но безрезультатно.

Answer 1

Я рекомендую использовать атрибут data для сохранения текущего текста, например, так:

$(document).ready(function() { 
 
     var content = $('.below').hide(); 
 
     $(".toggleBtn").each(function(){ 
 
      $(this).data("text", $(this).text()); //Save the current text() to data-text attribute 
 
     }); 
 
     $('.toggleBtn').on('click', function() { 
 
      var $this = $(this); 
 
      
 
      if($this.text() == "read less") 
 
       $this.text($this.data("text")); //Replace text with data-text if clicked again 
 
      else 
 
       $this.text("read less"); 
 
      
 
      $this.next('.below').slideToggle().siblings('.below').slideUp(); 
 
      $this.toggleClass('active').siblings('.toggleBtn.active').each(function(){ 
 
       $(this).text($(this).data("text")); //Replace previous open sibling text with data-text 
 
      }).removeClass('active'); 
 
      return false; 
 
\t \t \t }); 
 
     //register the handler to button element inside .below 
 
     $('.below .close').on('click', function() { 
 
      //find the ancestor .below element of the clicked button 
 
      $(this).closest('.below').slideToggle(); 
 
     }); 
 
    });

.below {display: none;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 
 

 
<div class="toggleBtn">read more x</div> 
 
<div class="below">slideout x</div> 
 

 
<div class="toggleBtn">read more y</div> 
 
<div class="below">slideout y</div>

Answer 2

Fromdecay, если вы заинтересованы в другом подходе, вот еще способ кодирования этого:

• .promise().done(...) может использоваться для ожидания завершения анимации слайдов до тестирования .is(':visible') и установки текстовых кнопок. Это дает более приятный визуальный эффект. Тестирование содержимого элемента - плохая практика.
• Класс «active» может быть отброшен (если это не требуется для стилизации).
• javascript может быть свободен от жестко закодированных текстовых строк (по крайней мере, тех, которые появляются в пользовательском интерфейсе). Более/менее тексты могут быть определены в HTML как атрибуты data-, которые используются для установки текста кнопок, аналогичного ответу @ imtheman.
• Путем запуска обработчика кликов .toggleBtn с кнопок «закрыть», вся хорошая работа обработчика кликов может быть выполнена без необходимости использования именованной функции и без дублирования кода.

Выполнять все это и, верьте или нет, объем кода фактически уменьшается.

$(document).ready(function() { 
 
\t $(".toggleBtn").on('click', function (e) { 
 
\t \t $(this).next('.below').slideToggle().siblings('.below').slideUp().andSelf().each(function() { 
 
\t \t \t var $below = $(this); 
 
\t \t \t $below.promise().done(function() { 
 
\t \t \t \t var $btn = $below.prev('.toggleBtn'); 
 
\t \t \t \t $btn.text($btn.data($below.is(':visible') ? 'less' : 'more')); 
 
\t \t \t }); 
 
\t \t }); 
 
\t }); 
 
\t $('.below .close').on('click', function (e) { 
 
\t \t $(this).closest('.below').prev('.toggleBtn').trigger('click');//trigger the click on the corresponding `.toggleBtn` element. 
 
\t }); 
 
});

.below {display: none;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 
 

 
<div class="toggleBtn" data-more="read more x" data-less="read less x">read more x</div> 
 
<div class="below">slideout X</div> 
 

 
<div class="toggleBtn" data-more="read more y" data-less="read less y">read more y</div> 
 
<div class="below">slideout Y</div> 
 

 
<div class="toggleBtn" data-more="read more z" data-less="read less z">read more z</div> 
 
<div class="below">slideout Z</div>