Javascript 如何在单击按钮时添加css

单击按钮jquery时如何添加css

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

以下是我尝试过的：

$（“#toogle_菜单”）。单击（函数（）{
$（“#jy_nav_pos_main”）。滑动切换（“慢速”），
$（“#toogle_菜单”）.css({
变换：“旋转（-90度）”
});
});


菜单

&拉阔；
不是在每次单击中设置样式，而是使用class
$（“#toogle_菜单”）.toggleClass（“toggled”）
并在css中设置该类的样式


$（“#toogle_菜单”）。单击（函数（）{
$（“#jy_nav_pos_main”）。滑动切换（“慢速”），
$（“#toogle_菜单”）.toggleClass（“toggled”）
});
。切换{
变换：旋转（-90度）；
}


......

&拉阔；
不是在每次单击中设置样式，而是使用class
$（“#toogle_菜单”）.toggleClass（“toggled”）
并在css中设置该类的样式


$（“#toogle_菜单”）。单击（函数（）{
$（“#jy_nav_pos_main”）。滑动切换（“慢速”），
$（“#toogle_菜单”）.toggleClass（“toggled”）
});
。切换{
变换：旋转（-90度）；
}


......

&拉阔；
试试这个


var=false；
$（“#toogle_菜单”）。单击（函数（）{
var deg=点击？0:-90；
$（“#jy_nav_pos_main”）。滑动切换（“慢速”），
$（“#toogle_菜单”）.css({
变换：“旋转（“+deg+”deg）”
});
点击=！点击；
});


菜单

&拉阔；
试试这个


var=false；
$（“#toogle_菜单”）。单击（函数（）{
var deg=点击？0:-90；
$（“#jy_nav_pos_main”）。滑动切换（“慢速”），
$（“#toogle_菜单”）.css({
变换：“旋转（“+deg+”deg）”
});
点击=！点击；
});


菜单

&拉阔；
试试这个

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


.导航{
显示：无；
}
.轮换{
变换：旋转（90度）；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
过渡：所有0.4s线性；
}
#单击BTN范围{
过渡：所有0.4s线性；
}
点击

项目1
项目2
项目3
项目4
项目5

$（文档）.ready（函数（）{
$（“#clickBtn”）。在（'click'，function（）上{
$（this）.find（'span'）.toggleClass（'rotate'）；
$（“.nav”）.slideToggle（）；
});
});
试试这个

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


.导航{
显示：无；
}
.轮换{
变换：旋转（90度）；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
过渡：所有0.4s线性；
}
#单击BTN范围{
过渡：所有0.4s线性；
}
点击

项目1
项目2
项目3
项目4
项目5

$（文档）.ready（函数（）{
$（“#clickBtn”）。在（'click'，function（）上{
$（this）.find（'span'）.toggleClass（'rotate'）；
$（“.nav”）.slideToggle（）；
});
});
您没有任何div元素！！！你没有任何div元素！！！我不工作，我的代码像这样我已经有了css切换，所以我添加了更多的css但不工作。我不工作，我的代码像这样我已经有了css切换，所以我添加了更多的css但不工作。嗨，欢迎来到so。您可以提供一个更全面的答案：1）提供关于要做哪些更改/如何解决问题的注释2）将代码作为工作片段添加。对于这样的问题，人们会倾向于不费吹灰之力就能找到答案。嗨，欢迎来到SO。您可以提供一个更全面的答案：1）提供关于要做哪些更改/如何解决问题的注释2）将代码作为工作片段添加。对于这样的问题，人们会倾向于不费吹灰之力就能找到答案。