作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个小部件,为此我正在使用 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 时,它应该更改其类并开始过渡,但它不起作用。请指出我所犯的错误。
感谢您的宝贵时间。
最佳答案
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>
关于javascript - 如何在 div 上使用 onclick 开始转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37566478/
我是一名优秀的程序员,十分优秀!