JQuery更多/更少切換

Question

我已拼湊在一起以下切換顯示第一個段落更多botton作爲第一段內的跨度。當點擊更多時，其他段落顯示，更多的按鈕被隱藏，但是當點擊更少的按鈕時，我需要更多的按鈕返回..你能幫忙嗎？

<script> 
    $('div#introduction').each(function(){ 
    var NODES = $(this).find('p').length; 
    if(NODES>0){ 
     $(this).find('p:first').addClass('first'); 
     $(this).find('p:last').addClass('last'); 
     $('#introduction p.first').append('&nbsp;<span class="more"><a class="toggle">More</a></span>'); 
     $('#introduction p.last').append('&nbsp;<span class="less"><a class="toggle">less</a></span>'); 
     $('#introduction p').hide().slice(0,1).addClass('fixed').show(); 
     $('.toggle').click(function(){ 
     $(".more").hide(); 
     $('p:not(.toggle,.fixed)').toggle(); 
     $(this).text(function(_, ML){ 
     return ML === 'Less' ? 'More' : 'Less'; 
     }); 
     }); 
    } 
    }); 
    </script> 

提前

斯圖

Answer 1

非常感謝那豈不是足以取代這個：

$(".more").hide(); 

與此：

$(".more").toggle(); 

...然後刪除該代碼改變文本，以便您單擊處理結束這樣的：

$('.toggle').click(function(){ 
    $(".more").toggle(); 
    $('p:not(.toggle,.fixed)').toggle(); 
    }); 

演示：http://jsfiddle.net/dXJrr/

從那以後，所有你正在做的是切換的東西，你可以你的點擊處理程序減少到一個行：

 $('.more, p:not(.toggle,.fixed)').toggle(); 

...但你可以得到這樣一個漂亮的效果：

 $('.more').toggle(); 
    $('p:not(.toggle,.fixed)').slideToggle(); 

演示：http://jsfiddle.net/dXJrr/2/

Answer 2

如果我的理解是正確的，下面是你需要的。

$('div#introduction').each(function() { 
     var NODES = $(this).find('p').length; 
     if (NODES > 0) { 
      $(this).find('p:first').addClass('first'); 
      $(this).find('p:last').addClass('last'); 
      $('#introduction p.first').append('&nbsp;<span class="more"><a class="toggle">More</a></span>'); 
      $('#introduction p.last').append('&nbsp;<span class="less"><a class="toggle">Less</a></span>'); 
      $('#introduction p').hide().slice(0, 1).addClass('fixed').show(); 
      $('.more').click(function() { 
       $('p:not(.toggle,.fixed)').toggle(); 
       $(".less").show(); 
       $(".more").hide(); 
      }); 
      $('.less').click(function() { 
       $('p:not(.toggle,.fixed)').toggle(); 
       $(".more").show(); 
       $(".less").hide(); 
      }); 
     } 
    }); 

Demo Fiddle