当我单击链接时它起作用,它折叠其他隐藏的名称,但我试图在单击链接后更改图像。不能让这个工作。这是我现在拥有的:
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
//the data stored in the data-emails
var emailData = ($(this).attr("data-emails"));
//toggle the link clicked on
$(".email" + emailData).toggle();
$(".more").toggle();
//select the parent and find the span so you can
//toggle the "email-plus" class
$(this).parent().find("span").toggleClass("email-plus");
$(this).parent().find("span").toggleClass("less");
});
});
<table cellpadding="0" cellspacing="0" border="1">
<tr style="vertical-align: bottom">
<td>
Names:
<a href="#" class="toggler" data-emails="1">
<span class="email-plus" style="text-transform: none;font-weight: bold;outline: 0;">All Names</span>
<span class="more"><img src='more.png'></span> <span class="less"><img src='less.png'></span>
</a>
</td>
</tr>
<tr style="vertical-align: top;display:none;" class="email1">
<td colspan="6" cellpadding="0" cellspacing="0" style="vertical-align: top;">
<p class="email1" style="display:none;font-weight: bold; margin-left: 44px; margin-top: 1px; margin-bottom: 3px;">Name 1</p>
<p class="email1" style="display:none;font-weight: bold; margin-left: 44px; margin-top: 3px; margin-bottom: 3px;">Name 2</p>
<p class="email1" style="display:none;font-weight: bold; margin-left: 44px; margin-top: 1px; margin-bottom: 2px;">Name 3</p>
</td>
</tr>
</table>
感谢您的关注!
最佳答案
请查看演示并尝试。删除more
和less
。
关于javascript - 向链接添加展开和折叠图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28117594/