0

我将以下切换拼凑在一起，以显示第一段，在第一段内有一个更多的按钮作为跨度。单击更多时，会显示其他段落并且隐藏更多按钮，但是当单击更少按钮时，我需要返回更多按钮..你能帮忙吗？

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

提前谢谢了

斯图

4

2 回答 2

3

替换它还不够：

$( ".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/

于 2013-10-13T09:45:19.570 回答
1

如果我的理解是正确的，那么以下就是您所需要的。

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

演示小提琴

于 2013-10-13T09:45:47.957 回答