1

这是我的标记：

<div id="august2012" class="event_month">
  <div class="header"><span>August 2012</span></div>
  <div id="event3" class="event">
    <h3>Example Event 3 - 19/08/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
  <div id="event4" class="event">
    <h3>Example Event 4 - 24/08/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div> 
<div id="july2012" class="event_month">
  <div class="header"><span>July 2012</span></div>
  <div id="event1" class="event">
    <h3>Example Event 1 - 10/07/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
  <div id="event2" class="event">
    <h3>Example Event 2 - 14/07/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div> 
<div id="june2012" class="event_month">
  <div class="header"><span>June 2012</span></div>
</div>
<div id="may2012" class="event_month">
  <div class="header"><span>May 2012</span></div>
</div>

现在，我需要编写一些 javascript 代码，以便当有人单击“.header”类之一时，下面的“.event”类会向下滑动。

问题是，我如何编写一些可以在所有月份都使用的代码，而无需在添加另一个月份时编写更多代码。

这是我到目前为止所拥有的，但它不起作用......

$("#events #event_listings .event_month .header").click(function() { 
    $(this).parent(".event").slideDown('slow');
});

谁能帮我这个？

4

1 回答 1

1

你想要这样的东西吗？

$('.header').click(function(){
    $(this).nextUntil('.header').slideToggle();        
});​

http://jsfiddle.net/p8LrG/

于 2012-07-20T20:39:33.600 回答