在 jQuery 中旋转 else

【问题标题】：Rotate in jQuery else在 jQuery 中旋转 else
【发布时间】：2019-06-05 17:14:00
【问题描述】：

我尝试使用 jQuery 制作导航栏切换器，但“else”不适用于我

$("#__chn").click(function () {
if($(".jax2").css("display","block")){
    var r__o_t = 50;
    var n_r_ot = -50;
    var n = 0;
    $(".jax2").css({"display":"none"})
    //$(".jax1").css({"transform":"translate(20%)"})
    $(".jax1").css({"transform":'rotate('+ r__o_t +'deg)'})
    $(".jax3").css({"transform":'rotate('+ n_r_ot +'deg)'})

 } else {
    $(".jax2").css({"display":'block'})
    $(".jax1").css({"transform":'rotate(none)'})
    $(".jax3").css({"transform":'rotate(none)'})
 }
});

当我点击“if”工作但“else”不起作用时

【问题讨论】：

标签： jquery transform

【解决方案1】：

您应该在条件语句中使用:visible selector。

$("#__chn").click(function () {
if($(".jax2").is(":visible")){
    var r__o_t = 50;
    var n_r_ot = -50;
    var n = 0;
    $(".jax2").css({"display":"none"})
    //$(".jax1").css({"transform":"translate(20%)"})
    $(".jax1").css({"transform":'rotate('+ r__o_t +'deg)'})
    $(".jax3").css({"transform":'rotate('+ n_r_ot +'deg)'})

 } else {
    $(".jax2").css({"display":'block'})
    $(".jax1").css({"transform":'rotate(none)'})
    $(".jax3").css({"transform":'rotate(none)'})
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="__chn">Click Me</button>

<div class="jax2">Show/Hide</div>

【讨论】：