HTML: jQuery: DOM manipulation
Question
I'm lazy. There! That's out of the way.
I have a list of items of indeterminate length which I would like to render in HTML. I want to show a part of each item and then have a "show more" link in each item which will show more of the item. Since the "show more" link implements the same functionality, I bound the same click handler function to the "show more link" which then shows the HTML span which contains the hidden text. My code looks like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body>
<p>List of stuff</p>
<ul>
<li> One <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about One </span></li>
<li> Tow <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Two </span></li>
<li> Three <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Three </span></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".showmore_link").click(show_more_toggle);
});
show_more_toggle=function(){
$(".showmore").slideToggle();
}
</script>
</body>
</html>
When I click the "show more" link, it shows all three spans of class "showmore". How can I adjust the "show_more_toggle" click handler so that it only opens up the span in the same list item?
CONSTRAINT: I cannot use "id" attributes on the spans or the list elements for other reasons.
4 answers
solution1
3 2011-10-12 13:47:52
$('a.showmore_link').click(function() {
$(this).next().show();
});
solution2
1 2011-10-12 13:47:46
Try -
show_more_toggle=function(){
$(this).siblings(".showmore").slideToggle();
}
solution3
1 ACCPTED 2011-10-12 13:51:43
another solution:
$(document).ready(function() {
$(".showmore_link").click(function() {
$(this).parent().children(".showmore").slideToggle();
});
});
solution4
0 2011-10-12 13:49:18
使用next() -它将使您获得span元素。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.