将“显示更少”添加到 Javascript

Add Show Less to Javascript

本文关键字：添加 Javascript 显示更少 显示      更新时间：2023-09-26

我想添加到当前脚本中，以允许较少显示并滑回最大值 7。现在它只显示更多并向下切换。它用于在侧边栏应用程序中切换过滤器组 购物. 感谢您的帮助！

小提琴https://jsfiddle.net/wzkcraLx/

<script type="text/javascript">
$(function() {
    $('.filter-group:not(.filter-group-color) ul:not(.has_selected)').each(function(){
      var max = 7;
      if ($(this).find("li:not(.selected)").length > (max+1)) {
        $(this).find('li:gt('+(max-1)+'):not(.selected)')
        .hide()
        .end()
        .append(
          $('<li class="view-more-link"><a href="javascript:;"><i class="fa fa-plus"></i> Show More</a></li>').click( function(){
              $(this).siblings(':hidden').slideDown(100).end().slideUp(100);
          })
        );
      }
    });
  });
</script>

.HTML

<div class="filter-group filter-group-aunhgliz has_mutliple_items">
<h4>Size</h4>
<ul class="nav-aunhgliz ">
<li class="collection-container filter-active-size-6mm active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag size-6mm" href="/collections/watch-bands/size-6mm"><i class="check-icon"></i> 6mm</a>
</div>
</li>
<li class="collection-container filter-active-size-8mm active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag size-8mm" href="/collections/watch-bands/size-8mm"><i class="check-icon"></i> 8mm</a>
</div>
</li>
<li class="collection-container filter-active-size-9mm active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag size-9mm" href="/collections/watch-bands/size-9mm"><i class="check-icon"></i> 9mm</a>
</div>
</li>
</ul>   
</div>
我不知道

所有这些随机（不是小提琴）选择器是什么，但从这个开始：

$(function() {
  var mygroup = $('.filter-group').find('ul');
  var max = 7;
  mygroup.find("li").eq(max).after('<li class="view-more-link"><a href="javascript:;"><i class="fa fa-plus"></i> <span class="moreless">Show More</span></a></li>');
  mygroup.find('li.view-more-link').nextAll().hide();
  mygroup.on('click', '.view-more-link', function() {
    if ($(this).next().is(':visible')) {
      $(this).nextAll().slideUp(100);
      $(this).find('.moreless').text("Show More");
    } else {
      $(this).nextAll().slideDown(100);
      $(this).find('.moreless').text("Show Less");
    }
  });
});

在这里玩它：

https://jsfiddle.net/MarkSchultheiss/wzkcraLx/1/

这就是最终奏效的方法 - 一定与 shopify 应用程序存在冲突 - 感谢您的帮助！ 

<script type="text/javascript">
$(document).ready(function(){
$('.nav-brand').each(function(){ 
  var LiN = $(this).find('li').length;
  if( LiN > 10){    
    $('li', this).eq(9).nextAll().hide().addClass('extras');
    $(this).append('<li class="more small" style="font-weight:bold;">+ Show More</li>');    
  }
});
$('ul').on('click','.more',function(){
  $this = $(this);
  var text = ($this.text() == '- Show Less') ? '+ Show More' : '- Show Less';
  $this.text(text);  
  $(this).siblings('li.extras').slideToggle();
});
});
</script>
相关文章：