使用classname在JavaScript中切换回动作

时间:2015-12-16 21:30:11

标签: javascript onclick toggle

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

3 个答案:

答案 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>

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>

答案 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>