Блог

Главная - Вопросы по программированию - Как я могу добавить переход к этой кнопке «Показать больше категорий», которая отображает скрытые элементы li

Как я могу добавить переход к этой кнопке «Показать больше категорий», которая отображает скрытые элементы li

#javascript #html #jquery #css

Вопрос:

Поэтому в основном я попытался показать только 10 элементов по умолчанию, а остальные скрыть, которые видны при нажатии на раздел «Дополнительные категории» внизу. Сделал это с помощью jQuery, и теперь я хочу добавить некоторый переход в окно переключения, которое быстро открывается. Какие-нибудь указания?

 var max = 10;
jQuery('#menu-categories').each(function () {
    if (jQuery(this).find('li').length > max) {
        jQuery(this).find('li:gt('   max   ')').hide().end().append('<li class="sub_accordian"><div class="show_more">More Categories</div></li>');


        jQuery(this).find('.sub_accordian').click(function (e) {
            jQuery(this).siblings(':gt('   max   ')').toggle();
            if (jQuery(this).find('.show_more').length) {
                jQuery(this).html('<div class="show_less">Close Menu</div>');
            } else {
                jQuery(this).html('<div class="show_more">More Categories</div>');
            };
        });
    };
});

Просмотр шоу подробнее div

Комментарии:

1. вы имеете в виду анимацию?

Ответ №1:

Вот один из методов, который использует css transition . Когда страница загружена, jquery быстро определяет высоту открытия и закрытия UL. Он сохраняет эти переменные в атрибуты, которые можно легко захватить.

 var max = 3;
jQuery('#menu-categories').each(function() {
  let oh = 0;
  jQuery(this).find('li').each(function() {
    oh  =  jQuery(this).height()
  })
  oh  = jQuery(this).find('li').height()
  jQuery('#menu-categories').attr('open-height', oh);

  if (jQuery(this).find('li').length > max) {
    jQuery(this).find('li:gt('   max   ')').hide().end().append('<li class="sub_accordian"><div class="show_more">More Categories</div></li>');
    jQuery(this).attr('close-height', jQuery(this).height())
    jQuery(this).css({
      height: jQuery(this).height(),
      visibility: 'visible'
    })

    jQuery(this).find('.sub_accordian').click(function(e) {

      jQuery(this).siblings(':gt('   max   ')').toggle();
      if (jQuery(this).find('.show_more').length) {
        jQuery('#menu-categories').css('height', jQuery('#menu-categories').attr('open-height'))
        jQuery(this).html('<div class="show_less">Close Menu</div>').hide().fadeIn();
      } else {
        jQuery('#menu-categories').css('height', jQuery('#menu-categories').attr('close-height'))
        jQuery(this).html('<div class="show_more">More Categories</div>').hide().fadeIn();
      };
    });
  };
}); 
 #menu-categories {
  visibility: hidden;
  background: #f0f0f0;
  transition: height .5s;
  overflow: hidden;
  height: auto;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='menu-categories'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Комментарии:

1. Спасибо за это решение. Я нашел более простой способ сделать это в документации javascript. Используемые параметры функции переключения. переключите(«медленно»), и это сделало работу, которую я искал

Метки: ,