我有一个JavaScript函数openWall();
,它被设置为向div
添加一个类。但是,现在我想切换回这个动作。我已完成功能closeWall();
以恢复此操作,但我不知道如何让div
识别它。
剧本:
function openWall() {
var wall;
theWall = document.getElementById("wall");
theWall.className = "menu-responsive";
function closeWall() {
theWall.className = "";
}
}
HTML:
<div class="hamburger">
<a href="#" onclick="openWall();">Menu</a>
</div>
<div id="wall"></div>
答案 0 :(得分:3)
点击元素时,只需使用openWall()
函数打开或关闭相关元素,而不是尝试调用closeWall()
或toggleWall()
函数。当前状态;这可以通过查找表示其开放状态的类名来确定(缺少该类名意味着墙未打开)。所以,我建议如下:
function toggleWall() {
var theWall = document.getElementById('wall');
if (theWall.className.indexOf('menu-responsive') > -1) {
// indexOf returns -1 when the string is not found,
// therefore 'theWall' is found if the index is
// greater than -1; so 'theWall' is 'open', so here
// we close it:
theWall.className = theWall.className.replace('menu-responsive', '');
} else {
// the else here means that the string was not found,
// returning an index of -1 (or, technically, -1 or less;
// but indexOf only returns -1, 0 or positive indexes.
// so the string was not found, means the 'theWall' is
// 'closed' and so must be opened:
theWall.className = theWall.className + ' menu-responsive';
}
}
function toggleWall() {
var theWall = document.getElementById('wall');
if (theWall.className.indexOf('menu-responsive') > -1) {
theWall.className = theWall.className.replace('menu-responsive', '');
} else {
theWall.className = theWall.className + ' menu-responsive';
}
}
#wall {
background-color: red;
height: 4em;
}
#wall.menu-responsive {
background-color: limegreen;
}
#wall::before {
content: 'closed';
}
#wall.menu-responsive::before {
content: 'open';
}
<div class="hamburger">
<a href="#" onclick="toggleWall();">Menu</a>
</div>
<div id="wall"></div>
或者,使用稍微更新的方法,您可以根据需要使用Element.classList.toggle()
添加或删除给定的类名:
function toggleWall() {
var theWall = document.getElementById('wall');
theWall.classList.toggle('menu-responsive');
}
function toggleWall() {
var theWall = document.getElementById('wall');
// find out if the list of classes of the
// Element contains the class-name of
// 'menu-responsive' it's removed, and if
// it is not present then it's added:
theWall.classList.toggle('menu-responsive');
}
#wall {
background-color: red;
height: 4em;
}
#wall.menu-responsive {
background-color: limegreen;
}
#wall::before {
content: 'closed';
}
#wall.menu-responsive::before {
content: 'open';
}
<div class="hamburger">
<a href="#" onclick="toggleWall();">Menu</a>
</div>
<div id="wall"></div>
此外,我强烈建议您不要使用内联HTML属性进行事件绑定。切换到JavaScript绑定事件可以使维护和更新变得更加容易,而无需查找和替换遍布HTML源的函数调用。也就是说,我建议使用EventTarget.addEventListener()
添加事件处理程序:
document.querySelector('.hamburger > a[href="#"]')
.addEventListener('click', toggleWall);
function toggleWall() {
var theWall = document.getElementById('wall');
theWall.classList.toggle('menu-responsive');
}
// document.querySelector() returns the first
// HTML element matched by the CSS selector
// supplied as an argument; here it searches for
// an <a> element with a 'href' attribute equal
// to '#' which is the child of another element
// with the 'hamburger' class-name:
document.querySelector('.hamburger > a[href="#"]')
// binds the 'toggleWall()' function as the
// event-handler for the 'click' event:
.addEventListener('click', toggleWall);
function toggleWall() {
var theWall = document.getElementById('wall');
theWall.classList.toggle('menu-responsive');
}
#wall {
background-color: red;
height: 4em;
}
#wall.menu-responsive {
background-color: limegreen;
}
#wall::before {
content: 'closed';
}
#wall.menu-responsive::before {
content: 'open';
}
<div class="hamburger">
<a href="#">Menu</a>
</div>
<div id="wall"></div>
答案 1 :(得分:0)
确保你实际上调用 closeWall()函数,或者不执行任何代码。除此之外,您的代码应该可以工作。
除此之外,我建议通过将该值保存在变量中,将.className设置回更改前的任何值。
答案 2 :(得分:0)
您可以尝试使用以下内容切换班级名称
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="hamburger">
<a href="#" onclick="toggleWall();">Menu</a>
</div>
<div id="wall"> wall </div>
<script>
function toggleWall() {
var wall;
theWall = document.getElementById("wall");
if(theWall.className ==="abc"){
theWall.className = "menu-responsive";
}else{
theWall.className = "abc";
}
}
</script>
</body>
</html>