Question

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

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>

Answer 2

首先将div的不透明度设置为1.0（opacity:1.0;），然后将箭头将旋转度转换为0（transform: rotate(0deg);） on单击toggle_menu运行此功能：

() => {
document.getElementById('toggle_menu').style.opacity = '0.0';
document.getElementById('toggle_menu').style.transform = 'rotate("-90deg")';
}

请注意，这是本地JS代码。我倾向于不使用库。

Answer 3

尝试一下。

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>

Answer 4

尝试一下...

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

单击按钮时如何添加CSS

4 个答案: