Question

我想添加到当前脚本，允许更少的节目并向后滑动到最大值7.现在它只显示更多并切换。它用于在侧边栏应用中切换过滤器组以进行shopify。谢谢你的帮助！

FIDDLE 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>

Answer 1

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

$(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/

Answer 2

这是最终奏效的 - 必然与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>

添加Show Less到Javascript

2 个答案: