Question

有人可以快速指出我做错了什么以及为什么？我的目的是让每个 .learnmore课程在点击后扩展自己的.more-content。

JQ

    $(document).ready(function(){  

      //Toggle function
      $(".learnmore").click(function(){
        $(this).next(".more-content").slideToggle(500)
        return false;
      });  
});

HTML

<div class="wrapper">
<h2>Whatsup Stack!</h2>
<img src="/image.jpg" alt="Stack Overflow" />
<p>Quick, lorem Ipsum</p>
<p><a href="#" class="learnmore">Learn More</a></p>
<div class="more-content">
  <p>Quick, lorem Ipsum</p>
  <p>Quick, lorem Ipsum</p>
</div>
<!-- eo : more-content -->

Answer 1

改为使用find。

$(this).find(".more-content").slideToggle(500);

Answer 2

由于它不是您点击的元素的子元素，因此您需要先遍历.parent。然后，由于它是父母之后的下一个.more-content，你可以选择它。

<强> Live Demo

  //Toggle function
  $(".learnmore").click(function(){
    $(this).parent('p').next(".more-content").slideToggle(500);
    return false;
  });

使用一个函数折叠每个div

2 个答案: