How do you find the next XX element in jquery? What I'm trying to achieve is that when someone clicks in one of th开发者_JAVA技巧e "event_details_arrow" class, the next "event_detail" class will show/hide.
This is my code, but at the moment is shows/hides all the event_detail classes whenever I click on any of the "event_details_arrow".
$(".event_details_arrow").bind("click", function () {
$(".event_detail").slideToggle();
});
<tr>
<td>yyy</td>
<td class="event_details_arrow"><span></span></td>
<td class="lastcol"><a href=""><span>Register</span></a></td>
</tr>
<tr class="event_detail">
<td colspan="3">text</td>
</tr>
<tr>
<td>yyy</td>
<td class="event_details_arrow"><span></span></td>
<td class="lastcol"><a href=""><span>Register</span></a></td>
</tr>
<tr class="event_detail">
<td colspan="3">text</td>
</tr>
<tr>
<td>yyy</td>
<td class="event_details_arrow"><span></span></td>
<td class="lastcol"><a href=""><span>Register</span></a></td>
</tr>
<tr class="event_detail">
<td colspan="3">text</td>
</tr>
Thanks
If you are sure about having one parent, you could use something like:
$(".event_details_arrow").bind("click", function () {
$(this).parent().next().slideToggle();
});
$(".event_details_arrow").bind("click", function () {
$(this).next(".event_detail").slideToggle();
});
// or
$(".event_details_arrow").bind("click", function () {
$(this).closest(".event_detail").slideToggle();
});
perhaps?
$(".event_details_arrow").bind("click", function () {
$(this).closest(".event_details_arrow").slideToggle();
});
精彩评论