我想通过单击此图标将显示更改为阻止:
<div class="index-navi-frame-box">
<p onclick="expandFunction()">
<i class="fa fa-bars"></i>
</p>
</div>
这就是它应该改变的
<div class="index-navi-expended"></div>
CSS:
.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
position: relative;
display: none;
}
最佳答案
使用jQuery,您可以删除旧的类并添加新的类,如下所示:
$(".index-navi-frame-box").on("click", function() {
$(this).removeClass("index-navi-frame-box").addClass("index-navi-expended);
});
但是,如果可能的话,我建议新类仅覆盖旧类的样式,因此您可以添加新类而不删除旧类。
尽量避免使用内联JavaScript(
onclick=""
),并将代码放在单独的.js文件或<script></script>
标记中。