Question

我有一个菜单，其中包含li中的所有项目。我想要做的是，只要li s超过5我想显示“查看更多”选项并隐藏剩余的li并在点击“查看更多”时显示它们并隐藏它们当点击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

当li s不超过5时，“查看更多”选项不应该存在，并且“查看更多”选项应该用少量替换，并且点击那些应该隐藏的选项是if我转到其他“查看更多”并点击打开的那个应该关闭。

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

Answer 2

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

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

2 个答案: