javascript - 单击按钮时如何添加CSS

Question

如何在单击按钮时添加 css jquery？

我想创建当我点击按钮时它会切换隐藏我的 div 并将箭头旋转到 90 度，当再次点击它会切换显示我的 div 并将箭头旋转到 -90 度。

这是我尝试过的:

$("#toogle_menu").click(function() {
  $("#jy_nav_pos_main").slideToggle("slow"),
    $("#toogle_menu").css({
      transform: "rotate(-90deg)"
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs row margin_auto" id="jy_nav_pos_main" role="tablist">
  <li>menu</li>
</ul>
<button id="toogle_menu" class="btn btn-light">
    &raquo;
</button>

Answer 1

不是在每次点击时设置样式，toggle类 $( "#toogle_menu").toggleClass( "toggled") 并在 css 中设置此类样式

$("#toogle_menu").click(function() {
  $("#jy_nav_pos_main").slideToggle("slow"),
    $("#toogle_menu").toggleClass("toggled")
});

.toggled {
  transform: rotate(-90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs row margin_auto" id="jy_nav_pos_main" role="tablist">
  ......
</ul>
<button id="toogle_menu" class="btn btn-light">
&raquo;
</button>