用 jquery 操作 css 元素

Question

我还在学习 jquery。

我想做一个代码，如果我点击按钮，2个div会同时移动，背景会被另一个div覆盖，opacity为0.5

所以当我点击菜单按钮时，菜单右和菜单左将分别左右移动

然后div class="overlay"的z-index和opacity将被更改，然后检查#circleMenu是否有.open类，如果没有则添加.open类并移动#left和#right div

我使用自定义函数来运行它onclick="show()"

代码不起作用，当我在控制台上检查问题和错误时，它显示：

语法错误：意外的标记。 Uncaught ReferenceError: show is not defined

编辑

感谢@Tirthraj Barot，错误现在消失了。

我的问题仍然存在，我希望当我点击按钮时代码会这样做：

1. 更改覆盖背景的不透明度和 z-index，使其覆盖主体

2. 同时移动圆内的2个div

我预计它会同时执行，但实际上并非如此。我第一次点击按钮时，只覆盖了背景，第二次，背景覆盖消失了，但 div 移动了

      function show() {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);
      if ($("#circleMenu").hasClass("open") == true) {
       $("#circleMenu").removeClass("open");
       $("#left").css("left", "-100px");
       $("#right").css("right", "-100px");
    } else if ($("#circleMenu").hasClass("open") == false) {
       $("#circleMenu").addClass("open");
       $("#left").css("left", "100px");
       $("#right").css("right", "100px");
    }
}
$(".show").on("click", function() {
   show();
 });

body {
	margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
}
.overlay {
	width : 100%;
	height : 100%;
	background-color : gray;
	opacity : 0;
	z-index : -1;
	position : absolute;
	transition : all 1s;
}
.kontainer-menu {
	width : 50%;
	height : 30%;
	margin : auto;
	position : relative;
	z-index : 2;
	top : 40%;
}
#circleMenu {
	width : 200px;
	height : 200px;
	border-radius : 50%;
	background-color : red;
	z-index : 3;
	position : relative;
	left : 35%;
}
#left {
	width : auto;
	position : absolute;
	background-color : green;
	top : 90px;
	left : 100px;
}
#right {
	width : auto;
	position : absolute;
	background-color : teal;
	top : 90px;
	right : 100px;
}

<div class="overlay"></div>
<div class="kontainer-menu">
<button onclick="show()">Menu</button>
	<div id="circleMenu">
		<div id="left"> menu Left</div>
		<div id="right"> menu Right</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 1

.overlay 应该用双引号

function show() {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);
    if ($("#circleMenu").hasClass("open") == true) {
        $("#circleMenu").removeClass("open");
        $("#left").css("left", "-100px");
        $("#right").css("right", "-100px");
    } else if ($("#circleMenu").hasClass("open") == false) {
        $("#circleMenu").addClass("open");
        $("#left").css("left", "100px");
        $("#right").css("right", "100px");
    }
}

----------------更新---------

我更新了上面的代码。 你忘了在 if 和 else 块中的 100 和 -100 之后写 px。

------------ 更新 2 ------------

只是为了显示两个 div 的同时移动，left 和 right，并根据我的看法更改背景覆盖颜色，我对您的代码进行了一些更新。如果我误解了您的要求，请告诉我..

看看吧。

function show() {
  if ($("#circleMenu").hasClass("open") == true) {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);

    $("#circleMenu").removeClass("open");
    $("#left").css("left", "-100px");
    $("#right").css("right", "-100px");
  } else if ($("#circleMenu").hasClass("open") == false) {
    $(".overlay").css("z-index", 0);
    $(".overlay").css("opacity", 0);


    $("#circleMenu").addClass("open");
    $("#left").css("left", "100px");
    $("#right").css("right", "100px");
  }
}
$(".show").on("click", function() {
  show();
});

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0;
  z-index: -1;
  position: absolute;
  transition: all 1s;
}
.kontainer-menu {
  width: 50%;
  height: 30%;
  margin: auto;
  position: relative;
  z-index: 2;
  top: 40%;
}
#circleMenu {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  z-index: 3;
  position: relative;
  left: 35%;
}
#left {
  width: auto;
  position: absolute;
  background-color: green;
  top: 90px;
  left: 100px;
  transition: all 1s;
}
#right {
  width: auto;
  position: absolute;
  background-color: teal;
  top: 90px;
  right: 100px;
  transition: all 1s;
}

<div class="overlay"></div>
<div class="kontainer-menu">
  <button onclick="show()">Menu</button>
  <div id="circleMenu">
    <div id="left">menu Left</div>
    <div id="right">menu Right</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 2

将您的按钮更改为：

<button class="show">Menu</button>

然后在你的 jQuery 中使用：

$(".show").on("click", function() {
  show();
});

为按钮元素设置点击处理程序。见：http://api.jquery.com/on/