单击按钮时如何添加css答案

【问题标题】：how to add css when button clicked单击按钮时如何添加css
【发布时间】：2018-11-28 07:58:51
【问题描述】：

jquery点击按钮时如何添加css？

我想创建，当我点击按钮时，它会切换隐藏我的 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>

【问题讨论】：

你没有任何 div 元素！！！

标签： javascript jquery html css

【解决方案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>

【讨论】：

对我不起作用，我这样的代码jsfiddle.net/sqfeonwh 我已经在切换 css，所以我添加了更多 css 但不工作。

【解决方案2】：

试试这个..

var clicked = false;
$("#toogle_menu").click(function() {
 var deg = clicked ? 0 : -90;
  $("#jy_nav_pos_main").slideToggle("slow"),
 
    $("#toogle_menu").css({
      transform: "rotate("+deg+"deg)"
    });
    clicked = !clicked;
});

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

【讨论】：

【解决方案3】：

试试这个...

<style type="text/css">
    .nav{
        display: none;
    }
    .rotate{
        transform: rotate(90deg);
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transition: all 0.4s linear;
    }
    #clickBtn span{
        transition: all 0.4s linear;
    }
</style>
<button type="button" id="clickBtn">Click &nbsp;&nbsp;&nbsp;<span class="fa fa-angle-right"></span></button>
<ul class="nav nav-tabs row margin_auto" id="jy_nav_pos_main" role="tablist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#clickBtn").on('click',function(){
            $(this).find('span').toggleClass('rotate');
            $(".nav").slideToggle();
        });
    });
</script>

【讨论】：

嗨，欢迎来到 SO。您可以通过以下方式提供更全面的答案：1）提供有关要进行哪些更改/如何解决问题的评论 2）将您的代码添加为有效的 sn-p。对于这样的问题，人们会倾向于找到可以毫不费力地解决问题的答案。