Переключить содержимое UL и текст обновления - PullRequest
Новая
       5

Переключить содержимое UL и текст обновления

0 голосов
/ 23 октября 2019

У меня есть этот код, который переключает содержимое UL: 

jQuery(document).ready(function () {
  jQuery("ul.item-options").click(function (evt) {
    if(evt.target.tagName != 'UL')
    return;
    jQuery("li", this).slideToggle(500);
  });
});
.item-options li {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class='item-options'>
  show
  <li>list item</li>
</ul>

<ul class='item-options'>
  show
  <li>list item</li>
</ul>

<ul class='item-options'>
  show
  <li>list item</li>
</ul>

Я хотел бы обновить это так, чтобы слово «показывать» переключалось между показом / скрытием.

Есть идеи?

Ответы [ 2 ]

1 голос
/ 23 октября 2019

Во-первых, обратите внимание, что ваш HTML-код недействителен. Вы не можете иметь текстовый узел в качестве дочернего элемента ul. Чтобы это исправить, вы можете переместить текст show за пределы ul в его собственный элемент. Я использовал p в примере ниже, но любой другой будет работать.

Оттуда вы можете прикрепить обработчик событий click к этому элементу, который вызывает slideToggle() для соответствующих элементов li изатем обновляет text() выбранного элемента на основе его текущей настройки. Попробуйте это: 

jQuery(function($) {
  $(".toggle").on('click', function() {
    $('ul li').stop().slideToggle(500);
    $(this).text((i, t) => t == 'show' ? 'hide' : 'show');
  });
});
.item-options li {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="toggle">show</p>
<ul class="item-options">
  <li>list item</li>
</ul>

Также обратите внимание на использование stop(), чтобы не допустить очереди анимации slideToggle при быстром щелчке по элементу подряд.

1 голос
/ 23 октября 2019

Вы можете попробовать код ниже - получить HTML внутри UL, а затем заменить текст в соответствии с текущим значением и вернуть HTML 

jQuery(document).ready(function () {
        jQuery("ul.item-options").click(function (evt) {
            if(evt.target.tagName != 'UL')
                return;
            var html = jQuery(this).html();
            if(html.indexOf('show')>=0) {
               jQuery(this).html(html.replace('show','hide'));
            } else {
               jQuery(this).html(html.replace('hide','show'));
            }
            jQuery("li", this).slideToggle(500);
           
        });
    });
.item-options li {
      display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class='item-options'>
   show
   <li>list item</li>
</ul>
...