jquery - 使用 jquery 操作 css 元素

Question

我还在学习 jquery。

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

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

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

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

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

SyntaxError: Unexpected token. 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 block 中的 100 和 -100 之后写 px。

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

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

看看吧。

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>