Question

我有多个列表：

    <ul id="list2">
            <li><a href="item.php?id=7">2A</a></li>
            <li><a href="item.php?id=2">2B</a></li>
            <li><a href="item.php?id=9">2C</a></li>
            <li><a href="item.php?id=4">2D</a></li>
            <li><a href="item.php?id=11">2E</a></li>
    </ul>
    <ul id="list3">
            <li><a href="item.php?id=7">3A</a></li>
            <li><a href="item.php?id=2">3B</a></li>
            <li><a href="item.php?id=9">3C</a></li>
    </ul>

如果有超过3个列表项，我使用jquery切换列表，显示更多/更少。

问题在于，如果所有项目都可见，并且没有任何项目可以切换，我不想更多/更少地显示文本。

Jquery的：

    <script type="text/javascript">
    $('ul[id^=list]').each(function(){

    if ( $('ul[id^=list]').children().length > 3 ) {

        $(this).children('li:gt(3)').hide(); 
        $(this).after('<a href="#" class="showhideul">More/Less</a>');
    }
          });
          $('.showhideul').click(function(e){
                e.preventDefault();
                $(this).prev('ul[id^=list]').children('li:gt(3)').toggle('slow');
                $('ul[id^=list]').not($(this).prev('ul[id^=list]')).each(function(){
                      $(this).children('li:gt(3)').hide();
                });
          });
    </script>

链接到我的代码：http://jsfiddle.net/Qvrsd/

Answer 1

请参阅：http://jsfiddle.net/Qvrsd/1/

$('ul[id^=list]').each(function () {

  if ($(this).children().length > 3) {     //<--  use $(this) instead of $('ul[id^=list]')

    $(this).children('li:gt(3)').hide();
    $(this).after('<a href="#" class="showhideul">More/Less</a>');
  }
});
$('.showhideul').click(function (e) {
  e.preventDefault();
  $(this).prev('ul[id^=list]').children('li:gt(3)').toggle('slow');
  $('ul[id^=list]').not($(this).prev('ul[id^=list]')).each(function () {
     $(this).children('li:gt(3)').hide();
  });
});

Answer 2

在以下情况下，使用$(this)代替$('ul[id^=list]')，您就可以了。

if ( $('ul[id^=list]').children().length > 3 ) {
    $(this).children('li:gt(3)').hide(); 
    $(this).after('<a href="#" class="showhideul">More/Less</a>');
}

如果没有剩余额外的物品，Jquery不会显示更多/更少

2 个答案: