我想通过单击此图标将显示更改为阻止:

<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>标记中。

10-05 21:02
查看更多