将showless添加到Javascript

我想添加到这个当前的脚本，以允许一个显示也少，并滑回最多7。现在它只需要显示更多并向下切换。它用于切换shopify边栏应用程序中的过滤器组。谢谢你的帮助

小提琴

$（函数（）{
$（'.filter group:not（.filter group color）ul:not（.has_selected'）。每个（函数（）{
var max=7；
if（$（this）.find（“li:未（.selected）”）.length>（最大值+1））{
$（this.find（'li:gt（+（max-1）+'）：未（.selected）'））
.hide（）
(完)
.附加(
$（'
）。单击（函数（）{
$（this）.sides（':hidden'）.slideDown（100.end（）.slideUp（100）；
})
);
}
});
});

HTML

大小

我不知道这些随机（非小提琴）选择器是什么，但从以下内容开始：

$(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");
    }
  });
});

$（函数（）{
var mygroup=$（'.filter group'）。find（'ul'）；
var max=7；
mygroup.find（“li”）.eq（max）.after（“
”）；
mygroup.find（'li.view更多链接'）.nextAll（）.hide（）；
mygroup.on（'单击'，'查看更多链接'，函数（）{
如果（$（this）.next（）是（':visible'））{
$（this.nextAll（）.slideUp（100）；
$（this.find（'.moreless'）.text（“显示更多”）；
}否则{
$（this.nextAll（）.slideDown（100）；
$（this.find（'.moreless'）.text（“Show Less”）；
}
});
});

在这里玩：

---

这就是最终奏效的方法-一定与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>

$（文档）.ready（函数（）{
$（'.nav brand'）。每个（函数（）{
var LiN=$（this.find（'li'）.length；
如果（LiN>10）{
$（'li'，this.eq（9）.nextAll（）.hide（）.addClass（'extras'）；
$（this）.append（“
+Show more
”）；
}
});
$（'ul'）。在（'click'，'more'，函数（）上{
$this=$（this）；
var text=（$this.text（）='-Show Less'）？'+Show More'：'-Show Less'；
$this.text（text）；
$（this.sibbins（'li.extras'）.slideToggle（）；
});
});

这是shopify应用程序中关于过滤的行话，全是液体和html——创建小提琴有时会发出刺耳的声音，很难在小提琴中创建。我尝试了脚本，但现在两者都没有了，它显示allI将我的脚本粘贴到您的小提琴中，覆盖您的代码作为测试，它的工作原理与我解释的所需功能相同。除此之外，我还需要澄清与此不同之处。

$(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");
    }
  });
});

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