Question

我有一个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>

Answer 1

点击元素时，只需使用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>

JS Fiddle demo

或者，使用稍微更新的方法，您可以根据需要使用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>

JS Fiddle demo

此外，我强烈建议您不要使用内联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>

Answer 2

确保你实际上调用 closeWall（）函数，或者不执行任何代码。除此之外，您的代码应该可以工作。

除此之外，我建议通过将该值保存在变量中，将.className设置回更改前的任何值。

Answer 3

您可以尝试使用以下内容切换班级名称

<!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>

使用classname在JavaScript中切换回动作

3 个答案: