Jquery 'click'函数仅适用于"if"语句，不适用于"else if"

Question

第一篇文章，我试图制作某种幻灯片菜单，尽管它可以点击一次并让菜单选项出现。再次单击会重新制作开头的动画，而不是将它们减回到第一个位置。

let menuopen = false;
$(document).ready(function(e) {
$("#menu_button").on('click',function(e) {
if (menuopen == false) {
$("#menu_button").css({"left":"500px"}).animate({left: '450px'})
$("#menu_select").css({"left":"500px"}).animate({left: '750px'});
$("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
menuopen == true;


}
else if (menuopen == true) {
$("#menu_button").css({"left":"450px"}).animate({left: '500px'})
$("#menu_select").css({"left":"750px"}).animate({left: '500px'});
$("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});
menuopen == false
}
});
});

Answer 1

您没有分配

menuopen == true;

应该是

menuopen = true;

在任何情况下：如果，为什么使用else？

试试这个-它将状态保存在按钮中

你可以使用三元，但在这种情况下会很混乱

$(function(e) {
$("#menu_button").on('click',function(e) {
const menuopen = !!$(this).data("open"); // force boolean 
if (menuopen) {
$("#menu_button").css({"left":"450px"}).animate({left: '500px'})
$("#menu_select").css({"left":"750px"}).animate({left: '500px'});
$("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});
}  
else {
$("#menu_button").css({"left":"500px"}).animate({left: '450px'})
$("#menu_select").css({"left":"500px"}).animate({left: '750px'});
$("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
}
$(this).data("open",!menuopen) 
});
});

也许

const butOpen =   { "left": "450px" },
butClosed =     { "left": "500px" },
selectOpen =    { "left": "750px" },
selectClosed =  { "left": "500px" },
select2Open =   { "left": "1050px" },
select2Closed = { "left": "500px" }
$(function(e) {
$("#menu_button").on('click', function(e) {
const menuopen = !!$(this).data("open"); // force boolean 
$("#menu_button").css(menuopen ? butOpen : butClosed).animate(menuopen ? butClosed : butOpen)
$("#menu_select").css(menuopen ? selectOpen : butClosed).animate(menuopen ? selectClosed : selectOpen)
$("#menu_select_two").css(menuopen ? select2Open : select2Closed).animate(menuopen ? select2Closed : select2Open)
$(this).data("open", !menuopen)
});
});

或者使用一个类并切换它：

window.addEventListener("load", function(e) {
const wrapper = document.querySelector(".wrapper");
document.getElementById("menu").addEventListener("click", function(e) {
wrapper.classList.toggle("open");
this.textContent = wrapper.classList.contains("open") ? "Close" : "Open";
})
})

.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper.open #slide {
transition: 1s;
left: 0;
}

<button id="menu" type="button">Open</button>
<div class="wrapper">
<img id="slide" src="https://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>