Question

我的切换按钮旋转有问题。使用jQuery将菜单的属性从{display:none}切换到{display:block}时。切换到块时，它曾经旋转了180度，但是当切换回无时，它保持不变，旋转了180度。我希望它在{display：none}时回到初始位置。
例如：

$(document).ready(function() {
    $("button").click(function(){
        $("p").css({"color":"red"});
    })
});

以上按钮将<p>元素变为红色；单击相同的按钮是否可以找回相同的初始颜色？

Answer 1

是的，在这样的变量中获取颜色：

var color = $("button").css("color");

$(document).ready(function() {
    $("button").click(function(){
        var color = $("button").css("color");
        console.log(color);
        $("button").css({"color":"red"});
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="color:blue">click me</v>

Answer 2

您可以切换颜色值：

var pColor = $("p").css("color");
$("p").css({
  "color": (pColor == "red" ? "black" : "red")
});

或者，您可以使用标志：

var switchBack = false;
$("button").click(function(){
  $("p").css({
    "color": (switchBack ? "red" : "black")
  });
  switchBack = !switchBack;
})

Answer 3

您可以使用切换类：

 $(".red").click(function () {
   $(this).toggleClass("green");
});

请参阅demo

jQuery任务完成后如何检索元素的初始属性？

3 个答案: