javascript - 向链接添加展开和折叠图像

Question

当我单击链接时它起作用，它折叠其他隐藏的名称，但我试图在单击链接后更改图像。不能让这个工作。这是我现在拥有的:

     $(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>

感谢您的关注!

Answer 1

请查看演示并尝试。删除more 和less。

http://jsfiddle.net/tvd2dfe0/2/