0

複数のリストがあります：

    <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 を使用して [Show more/less] でリストを切り替えます。

問題は、すべてのアイテムが表示されていて、切り替えられるものが何も残っていない場合、テキストを多かれ少なかれ表示したくないことです。

Jクエリ:

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

4

2 に答える 2

2

これを参照してください：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();
  });
});
于 2013-04-15T12:59:01.223 に答える