0

我有一个菜单，其中包含lis 中的所有项目。我想要做的是每当lis超过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>

这是我想要做的事情的一个jsfiddle：

提琴手

当lis 不超过 5 时，“查看更多”选项不应该存在，并且“查看更多”选项应该被替换为更少，如果我去其他“查看更多”，点击那些应该隐藏的选项并单击打开的应该关闭。

4

2 回答 2

1

根据您的 jsfiddle，我执行了以下操作：

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

演示：http: //jsfiddle.net/dirtyd77/qN59g/4/

希望这可以帮助！

更新

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

演示：http: //jsfiddle.net/dirtyd77/qN59g/6/

于 2013-04-18T20:08:09.933 回答
0 
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();
});

编辑注意：上述工作，但它是序列敏感的。如果您可以使用更新的 jQuery，请使用以下.on()代码：

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();
});
于 2013-04-18T20:08:22.960 回答