9

各メニューの最初の 3 つの項目を左側のナビゲーション フィルターに表示し、ユーザーがリストを展開できるようにする「もっと表示」と「表示を減らす」リンクを使用する jQuery ソリューションを見つけようとしています。

解決策を探しましたが、ほとんどの展開/折りたたみスクリプトはレイヤーを完全に非表示にしますが、他のスクリプトは展開 (さらに表示) リンクを表示しますが、折りたたむ (表示を減らす) リンクを表示するように切り替えません。

私のメニューは次のようにコーディングされています。

<div id="menu1">
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>
<div id="menu2">
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>
4

2 に答える 2

15

jsBin デモ

以下は基本的な例です。

$('ul.term-list').each(function(){
  
  var LiN = $(this).find('li').length;
  
  if( LiN > 3){    
    $('li', this).eq(2).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">More...</li>');    
  }
  
});


$('ul.term-list').on('click','.more', function(){
  
  if( $(this).hasClass('less') ){    
    $(this).text('More...').removeClass('less');    
  }else{
    $(this).text('Less...').addClass('less'); 
  }
  
  $(this).siblings('li.toggleable').slideToggle();
    
});

または、よりコンパクトなバージョン。

于 2012-06-17T17:04:07.633 に答える
4

デモ: http://jsfiddle.net/DQKyT/

$(function(){
    /* add button, hide extra items*/      
    $('.term-list').each(function() {
        var $list = $(this);
        $list.before('<button class="more_less">More</button>')
       $list.find('.term-item:gt(2)').hide();
    });

    /* button click handler*/
    $('.more_less').click(function() {
        var $btn = $(this)
        $btn.next().find('.term-item:gt(2)').slideToggle();    
        $btn.text($btn.text() == 'More' ? 'Less' : 'More');   
    });
})
于 2012-06-17T17:38:11.970 に答える