用jquery

Question

我还在学习jquery。

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

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

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

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

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

  

SyntaxError：意外的令牌。未捕获的ReferenceError：show未定义

修改

感谢@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应该是双引号

@Transactional

---------------- UPDATE ----------

我更新了上面的代码。 您忘记在if和else块中在100和-100之后写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"); } } 。

------------ UPDATE 2 ------------

只是为了显示两个div的同时移动，px和left，并根据我的感知更改背景叠加颜色，我稍微更新了您的代码。如果我误解了您的要求，请告诉我。

看看它。

＆＃13;

＆＃13;

right

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

将按钮更改为：

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

然后在你的jQuery中使用：

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

为按钮元素设置on click处理程序。请参阅：http://api.jquery.com/on/