Question

Jquery的

    jQuery ( function ( $ ) {
  var post = $('div.post');

  post.on('click', function(e){
    toggle();
  });

  function toggle(){
    var panel = $('div.postPanel');
    if (panel.is(":hidden")) {
       panel.slideDown('slow');
   } else {
     panel.slideUp('slow', function () {
        $(this).hide();
     });
    }
  }
});

HTML

    <section>
      <div class="post">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate ex posuere, lacinia ex a, tempor diam. Integer porta ante sit amet turpis gravida
      </div>
      <div class="postPanel">
        ac finibus augue feugiat. Mauris ornare ligula a neque venenatis, in sodales dolor vehicula. Duis eget euismod arcu. Aliquam sollicitudin porta ante vitae sollicitudin. Nullam leo erat, tempus vel sodales et, ullamcorper faucibus massa. Morbi lacinia mi vulputate, tincidunt neque nec, aliquam magna. Proin et dictum quam, pulvinar dignissim lacus. Maecenas ligula elit, scelerisque sit amet finibus at, sodales ac ipsum. Vestibulum vulputate bibendum augue eu egestas. Sed nulla felis, blandit at tincidunt nec, tempus eu justo. Nunc hendrerit id risus id tristique. Aenean libero quam, ultricies eget mattis sit amet, scelerisque at ante. Mauris pellentesque varius rutrum. Vivamus turpis justo, commodo sit amet magna in, blandit convallis mauris. Suspendisse potenti.
      </div>

    </section>
   <section>
      <div class="post">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate ex posuere, lacinia ex a, tempor diam. Integer porta ante sit amet turpis gravida
      </div>
      <div class="postPanel">
        ac finibus augue feugiat. Mauris ornare ligula a neque venenatis, in sodales dolor vehicula. Duis eget euismod arcu. Aliquam sollicitudin porta ante vitae sollicitudin. Nullam leo erat, tempus vel sodales et, ullamcorper faucibus massa. Morbi lacinia mi vulputate, tincidunt neque nec, aliquam magna. Proin et dictum quam, pulvinar dignissim lacus. Maecenas ligula elit, scelerisque sit amet finibus at, sodales ac ipsum. Vestibulum vulputate bibendum augue eu egestas. Sed nulla felis, blandit at tincidunt nec, tempus eu justo. Nunc hendrerit id risus id tristique. Aenean libero quam, ultricies eget mattis sit amet, scelerisque at ante. Mauris pellentesque varius rutrum. Vivamus turpis justo, commodo sit amet magna in, blandit convallis mauris. Suspendisse potenti.
      </div>

    </section>

我有动态生成的帖子显示在列表中。当点击其中一个帖子时，它会显示所有滑动的“postPanel”，这是不对的。想要点击每个帖子时显示每个滑动“postPanel”。

Answer 1

您可以使用.siblings()查找要隐藏的相应.postPanel。

您可以使用.slideToggle()进行切换，而无需编写额外的代码来检查.postPanel当前是否可见。

JS：

$('.post').on('click', function() {
    $(this).siblings('.postPanel').slideToggle('slow');
});

这是fiddle。

Answer 2

使用 next 选择器选择下一个.postPanel

 jQuery ( function ( $ ) {
  var post = $('div.post');

  post.on('click', function(e){
    toggle(this);
  });

  function toggle(elm){
    var panel = $(elm).next('div.postPanel');  // use next selector 
    if (panel.is(":hidden")) {
       panel.slideDown('slow');
   } else {
     panel.slideUp('slow', function () {
        $(this).hide();
     });
    }
  }
});

的 DEMO

OR

jQuery(function ($) { $('div.post').on('click', function (e) { $(this).next('div.postPanel').slideToggle("slow"); }); });

如何在点击时逐个向下滑动面板

2 个答案:

的 DEMO