jQuery：添加 css() 和 fadeToggle

Question

我知道，非常菜鸟的问题：我在 Wordpress 网站上获得了这段代码，它可以正常工作

jQuery('.hamburger').click(function() {
jQuery('.menu-container').fadeToggle( "0.3s", "swing" ),
});

如何向此脚本添加 css() 方法？我已经尝试过类似的方法，但它不起作用：

    jQuery('.hamburger').click(function() {
    jQuery('.menu-container').fadeToggle( "0.3s", "swing" );
    jQuery(".bar2").css({"display":"none");
    jQuery(".bar").css({"width":"40px","margin-bottom":"-2px");
    jQuery(".bar1").css({"transform":"rotate(45deg)");
    jQuery(".bar1").css({"transform":"rotate(-45deg)");

});

实现我的目标的正确方法是什么？

Answer 1

在jquery

中使用.css的正确方法

$("p").css("color", "red");

工作

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This will turn to blue when button is clicked</p>
<button>Click Me</button>

下面的片段，

Answer 2

您使用.css()的方式是错误的。你应该使用 .css(property, value) 或 .css({property1: value1, property2: value2})

我在这里为您创建了一个片段。

jQuery('.hamburger').click(function() {
jQuery('.menu-container').fadeToggle( "0.3s", "swing" );
jQuery(".bar2").css("display","none");
jQuery(".bar").css({"width":"40px","margin-bottom":"-2px"});
jQuery(".bar1").css("transform","rotate(45deg)");
jQuery(".bar1").css("transform","rotate(-45deg)");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class=hamburger>Click me</button>
<div class=menu-container>Menu Container</div>
<div class=bar>Bar</div>
<div class=bar1>Bar1</div>
<div class=bar2>Bar2</div>

顺便说一句，我不知道你为什么要旋转 bar1 两次。但是，我还是用了你的代码。

jQuery：添加 css() 和 fadeToggle

jQuery: add css() and fadeToggle

css

jquery

hamburger-menu