javascript - jQuery单击显示/隐藏无法正常工作

Question

我目前正在此链接上创建一个页面。我在我的标题中使用这个javascript（在我的CSS下面）：

<script type="text/javascript" src="http://static.tumblr.com/txc9jrr/yNxmd3lq6/jquery.js">   
</script>

<script type="text/javascript">
$('.toggle').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.prev('.view')).toggle();
});​
</script>

这个HTML：

<table>
  <tr class="view">
      <td>
          <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
          hi
          <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
</table>

从理论上讲，它应该可以工作......但是当我将它实现到我的页面中时，它就停止了工作。有人知道我的问题是什么吗？

Answer 1

改变

<a class="toggle" class="icon-button" href="#">Edit</a>
   // ^--------------^---------------------Cannot define two classes like this

至

<a class="toggle icon-button" href="#">Edit</a>
 //  ^--------------------------------Try like this

演示

Answer 2

我认为你应该试试这个

$('.toggle').click(function(){

 if ($(".edit").css('display') == 'none') {

      $(".edit").css('display', 'block');
  }
}

我想这会对你有所帮助