是否在jquery的菜单中隐藏和显示列表项？

我有一个菜单，里面有

li

s中的所有项目。我想做的是，每当

li

s超过5时，我想显示“查看更多”选项，隐藏剩余的

li

s，并在单击“查看更多”时显示它们，并在单击

li

的另一个“查看更多”时反向隐藏它们

这是我的html

  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Categorys</a>
        <div>
            <ul> <a href=""> title="This is an example of a caption"></a></ul>
            <ul>
                <h3>Title1</h3>
                <li data-bind="100002"><a href="#">1</a></li>
                <li data-bind="100028"><a href="#">2</a></li>
            </ul>
            <ul>
                <h3>Title2</h3>
                <li data-bind="100000"><a href="#">1</a></li>
                <li data-bind="100004"><a href="#">2</a></li>
                <li data-bind="100007"><a href="#">3</a></li>
                <li data-bind="100009"><a href="#">4</a></li>
                <li data-bind="100010"><a href="#">5</a></li>//hide from here and show view more option and show them on click
                <li data-bind="100011"><a href="#">6</a></li>
                <li data-bind="100051"><a href="#">7</a></li>
            </ul>
            <ul>
                 <h3>Title3</h3>
                <li data-bind="100103"><a href="#">1</a></li>
                <li data-bind="100105"><a href="#">2</a></li>
                <li data-bind="100115"><a href="#">3</a></li>
                <li data-bind="200071"><a href="#">4</a></li>
                <li data-bind="200072"><a href="#">5</a></li>//hide from here and show view more option and show them on click
                <li data-bind="200073"><a href="#">6</a></li>
                <li data-bind="200043"><a href="#">7</a></li>
                <li data-bind="200044"><a href="#">8</a></li>
                <li data-bind="200045"><a href="#">9</a></li>
                <li data-bind="200046"><a href="#">10</a></li>
                <li data-bind="200047"><a href="#">11</a></li>
                <li data-bind="200048"><a href="#">12</a></li>
            </ul>
        </div>
    </li>
</ul>

标题1




标题2




//从此处隐藏并显示查看更多选项，然后单击显示它们




标题3




//从此处隐藏并显示查看更多选项，然后单击显示它们

这是我正在尝试做的一部分：

---

当

li

s不超过5时，“查看更多”选项不应出现，并且“查看更多”选项应替换为“更少”，单击时，如果我转到其他“查看更多”并单击打开的选项应关闭，则应隐藏这些选项。

基于您的JSFIDLE，我执行了以下操作：

$('.nav li > div > ul')
  .find('li:gt(4)') //you want :gt(4) since index starts at 0 and H3 is not in LI
  .hide()
  .end()
  .each(function(){
      if($(this).children('li').length > 5){ //iterates over each UL and if they have 5+ LIs then adds Show More...
          $(this).append(
              $('<li>Show More...</li>')
              .addClass('showMore')
              .click(function(){
                  $(this).hide().siblings(':hidden').show();
                  $('.showMore').not(this).show().siblings('li:gt(4)').hide();
              })
          );
     }
  });

$（'.nav li>div>ul'）
.find（'li:gt（4）//您需要：gt（4），因为索引从0开始，而H3不在li中
.hide（）
(完)
.each（函数（{
如果（$（this）.children（'li'）.length>5）{//迭代每个UL，如果它们有5个以上的LIs，则添加显示更多。。。
$（此）。附加(
$（“
显示更多…
”）
.addClass（'showMore'）
。单击（函数（）{
$（this.hide（）.sides（':hidden'）.show（）；
$（'.showMore'）。不是（this.show（）。同级（'li:gt（4）'））.hide（）；
})
);
}
});

演示：

希望这有帮助

更新

$（'.nav li>div>ul'）
.find（'li:gt（4）//您需要：gt（4），因为索引从0开始，而H3不在li中
.hide（）
(完)
.each（函数（{
如果（$（this）.children（'li'）.length>5）{//迭代每个UL，如果它们有5个以上的LIs，则添加显示更多。。。
$（此）。附加(
$（“
显示更多…
”）
.addClass（'showMore'）
。单击（函数（）{
if（$（this）.sides（':hidden'）.length>0）{
$（this.html（'Show Less…'）。同级（'：hidden'）.Show（）；
}否则{
$（this.html（'Show More…'）.Show（）.sibles（'li:gt（4）'）.hide（）；
}
})
);
}
});

演示：

---

您应该先自己尝试..将您在javascript/jquerystart中尝试的内容发布到JSFIDLE中，并在发布之前将您尝试过的内容反馈给我们@本斯沃兹是我的傀儡doing@TamilSelvan这是我正在做的事情。当我单击另一个时，您正在删除“显示更多”选项，而它应该在那里，但打开的lis应该隐藏，我希望单击viewmoreWait时显示opende li的较少选项，因此您希望有一个“显示较少”选项选项？我已经更新了我的答案。确保在问题中添加“少显示”功能。我以您的JSFIDLE示例为基础，您删除了“showmore”选项，因此我假设您不想要它。

$('.nav li > div > ul')
  .find('li:gt(4)') //you want :gt(4) since index starts at 0 and H3 is not in LI
  .hide()
  .end()
  .each(function(){
      if($(this).children('li').length > 5){ //iterates over each UL and if they have 5+ LIs then adds Show More...
          $(this).append(
              $('<li>Show More...</li>')
              .addClass('showMore')
              .click(function(){
                  if($(this).siblings(':hidden').length > 0){
                      $(this).html('Show Less...').siblings(':hidden').show();
                  }else{
                      $(this).html('Show More...').show().siblings('li:gt(4)').hide();
                  }
              })
          );
     }
  });

var viewMore = $('<li class="viewmore">Show More...</li>');
var nav = $('ul.nav>li>div>ul');
// only append to those needed
nav.find('>li:gt(4)').hide().parent().append(viewMore);
nav.find('.viewmore').click(function () {
    //hide all outside the limit
    nav.find('>li:gt(4)').hide();
    //show the viewmore - all or them
    nav.find('.viewmore').show();
    // now hide the viewmore and show its siblings
     $(this).hide().siblings().show();
});

var viewMore = $('<li class="viewmore">Show More...</li>');
var nav = $('ul.nav>li>div>ul');
nav.find('>li:gt(4)').hide().parent().append(viewMore);
nav.on('click','.viewmore',function () {
    nav.find('>li:gt(4)').hide();
    nav.find('.viewmore').show();
    $(this).hide().siblings().show();
});