[英]Javascript: How to create a dropdown effect? (Without JQuery)
At the moment when the menu button is clicked the dropdown displays, however, clicking the button once more does not hide the dropdown menu as it should.在单击菜单按钮时,会显示下拉菜单,但是,再次单击该按钮并不会像应有的那样隐藏下拉菜单。
Script.js脚本.js
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
var isClicked = false;
// Drop down Mobile
menuBtn.addEventListener('click', function () {
if (isClicked == false) {
//Btn Styles
menuBtn.style.backgroundColor = "none";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "none";
} else {
isClicked = true;
//Btn Styles
menuBtn.style.backgroundColor = "#1f283b";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "block";
}
});
it is better to change the content of your 'if block statement' to display the dropdown since the initial value of isClicked is false.最好更改“if 块语句”的内容以显示下拉列表,因为 isClicked 的初始值为 false。 After clicking the button then isCliked must be updated to true since you clicked it.单击该按钮后,必须将 isCliked 更新为 true,因为您单击了它。 Then the else block will contain the code for hiding the dropdown then update the isClicked variable to false.然后 else 块将包含隐藏下拉列表的代码,然后将 isClicked 变量更新为 false。
isClicked = false;
// inside the event listener
if(isClicked==false){
//show dropdown
isClicked = true;
}else{
//hide dropdown
isClicked = false;
}
you can also use jquery Library and use toggle() function您还可以使用 jquery 库并使用 toggle() 函数
set isClicked to true in the first if statement then false in the other.在第一个 if 语句中将 isClicked 设置为 true,然后在另一个 if 语句中设置为 false。
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
var isClicked = false;
// Drop down Mobile
menuBtn.addEventListener('click', function(){
if (isClicked == false) {
//Btn Styles
menuBtn.style.backgroundColor = "none";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "none";
isClicked = true
} else {
isClicked = false;
//Btn Styles
menuBtn.style.backgroundColor = "#1f283b";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "block";
}
});
You'd be better off using CSS, toggling a class on and off.您最好使用 CSS,打开和关闭类。 With this approach you could then also leverage CSS Transitions.通过这种方法,您还可以利用 CSS Transitions。
var menuBtn = document.getElementById('menu__icon'); var dropdown = document.getElementsByClassName('dropdown__menu')[0]; menuBtn.addEventListener("click", function() { this.classList.toggle("active"); dropdown.classList.toggle("active"); });
.dropdown__menu { /*display: none;*/ transform: scaleY(0); transform-origin: top; transition: transform 0.26s ease; } .dropdown__menu.active { /*display: block;*/ transform: scaleY(1); } #menu__icon { transition: all 1s; } #menu__icon.active { background-color: #1f283b; color: #FFF; }
<button id="menu__icon">Click Me</button> <div class="dropdown__menu">I'm a menu</div>
If you really want to keep the style in the javascript, invert the isClicked variable in one spot.如果您真的想保留 javascript 中的样式,请在一处反转 isClicked 变量。
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];
var isClicked = false;
// Drop down Mobile
menuBtn.addEventListener('click', function () {
if (!isClicked) {
//Btn Styles
menuBtn.style.backgroundColor = "none";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "none";
} else {
//Btn Styles
menuBtn.style.backgroundColor = "#1f283b";
menuBtn.style.color = "black";
//Menu visible
dropdown.style.display = "block";
}
//Invert true/false
isClicked = !isClicked
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.