javascript - 如何在 div 上使用 onclick 开始转换？

Question

我正在开发一个小部件，为此我正在使用 jquery 的 addClass 和 removeClass 方法，但有些方法不起作用，请帮助我解决这个问题。

代码如下:

$('#test').click(function() {
  $(this).addClass('second');
  console.log("hello");
}, function() {
  $(this).removeClass('second');
});

   #test {
     transition: all 0.5s ease;
   }
   .first {
     width: 150px;
     height: 30px;
     position: fixed;
     bottom: 0px;
     right: 25px;
   }
   #prop {
     width: 150px;
     height: 30px;
     position: fixed;
     bottom: 0px;
     right: 25px;
     background-color: #abc322;
     color: white;
     text-align: center;
   }
   .second {
     width: 150px;
     height: 300px;
     position: fixed;
     bottom: 0px;
     right: 25px;
     box-shadow: 3px 4px 40px grey;
   }

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="test" class="first">
  <div id="prop">
    freight Calculator
  </div>
  <p>
    welcome to freight calculator
  </p>
</div>

当我单击 div 时，它应该更改其类并开始过渡，但它不起作用。请指出我所犯的错误。

感谢您的宝贵时间。

Answer 1

jQuery .click()将一个函数作为事件监听器。您可以使用 .toggleClass()相反。

$('#prop').click(function(e) {
  e.preventDefault();
  $('#test').toggleClass('second');
});

#test {
  transition : all 0.5s ease;
}
.first {
  width: 150px;
  height: 30px;
  position: fixed;
  bottom: 0px;
  right: 25px;
}
#prop {
  cursor: pointer;
  width: 150px;
  height: 30px;
  position: fixed;
  bottom: 0px;
  right: 25px;
  background-color: #abc322;
  color: white;
  text-align: center;
}
.second {
  width: 150px;
  height: 300px;
  position: fixed;
  bottom: 0px;
  right: 25px;
  box-shadow: 3px 4px 40px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test" class="first">
  <div id="prop">
    freight Calculator
  </div>
  <p>
    welcome to freight calculator
  </p>
</div>