Question

这是我的标记：

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

任何人都可以帮我吗？

Answer 1

你想要这样的东西吗？

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

http://jsfiddle.net/p8LrG/

如何找出我需要使用的jQuery选择器？

1 个答案: