javascript - 如何使显示更改 onclick()

Question

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

<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;

Answer 1

使用 jQuery，您可以像这样删除旧类并添加新类:

$(".index-navi-frame-box").on("click", function() {

    $(this).removeClass("index-navi-frame-box").addClass("index-navi-expended);

});

但是，如果可能的话，我建议新类只是覆盖旧类的样式，这样您就可以只添加新类而无需删除旧类。

尽量避免内联 JavaScript (onclick="")，并将上面的代码放在单独的 .js 文件或 <script></script> 中标签。