每次点击两个班级之间切换

Question

我正在尝试解决如何在此之间进行更改：

            <li class="menu">

和此：

            <li class="menu open">

每次单击菜单时

。基本上如果关闭则每次点击都会打开菜单，如果打开则每次点击都会关闭菜单

代码段：

<div id="headerbar">
<div class="topbar">
  <div class="fill">
    <div class="container">

      <ul>
            <li><a href="./index.php"><img src="./img/home_icon.png" alt="Home"></a></li>
      </ul>



      <ul>
        <li class="menu">
          <a href="#" class="menu">Menu Heading</a>
        <ul class="menu-dropdown">
            <li><a href="http://google.com">Option 1</a></li>
            <li><a href="http://google.com">Option 2</a></li>
            <li><a href="http://google.com">Option 3</a></li>
            <li><a href="http://google.com">Option 4</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div>
</div>

我已经阅读了一些关于toggleClass的帖子，但似乎无法让它发挥作用。如果有人能够简单地为我分解它，那将非常感激！

以下是来自CSS的剪辑：

.topbar div > ul a.menu:hover,
.nav a.menu:hover,
.topbar div > ul li.open .menu,
.nav li.open .menu,
.topbar div > ul .dropdown-toggle:hover,
.nav .dropdown-toggle:hover,
.topbar div > ul .dropdown.open .dropdown-toggle,
.nav .dropdown.open .dropdown-toggle {
  background: #444;
  background: rgba(255, 255, 255, 0.05);
}
.topbar div > ul .menu-dropdown,
.nav .menu-dropdown,
.topbar div > ul .dropdown-menu,
.nav .dropdown-menu {
  background-color: #333;
}
.topbar div > ul .menu-dropdown a.menu,
.nav .menu-dropdown a.menu,
.topbar div > ul .dropdown-menu a.menu,
.nav .dropdown-menu a.menu,
.topbar div > ul .menu-dropdown .dropdown-toggle,
.nav .menu-dropdown .dropdown-toggle,
.topbar div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle {
  color: #ffffff;
}
.topbar div > ul .menu-dropdown a.menu.open,
.nav .menu-dropdown a.menu.open,
.topbar div > ul .dropdown-menu a.menu.open,
.nav .dropdown-menu a.menu.open,
.topbar div > ul .menu-dropdown .dropdown-toggle.open,
.nav .menu-dropdown .dropdown-toggle.open,
.topbar div > ul .dropdown-menu .dropdown-toggle.open,
.nav .dropdown-menu .dropdown-toggle.open {
  background: #444;
  background: rgba(255, 255, 255, 0.05);
}
.topbar div > ul .menu-dropdown li a,
.nav .menu-dropdown li a,
.topbar div > ul .dropdown-menu li a,
.nav .dropdown-menu li a {
  color: #999;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.topbar div > ul .menu-dropdown li a:hover,
.nav .menu-dropdown li a:hover,
.topbar div > ul .dropdown-menu li a:hover,
.nav .dropdown-menu li a:hover {
  background-color: #191919;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#292929),     to(#191919));
  background-image: -moz-linear-gradient(top, #292929, #191919);
  background-image: -ms-linear-gradient(top, #292929, #191919);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
  background-image: -webkit-linear-gradient(top, #292929, #191919);
  background-image: -o-linear-gradient(top, #292929, #191919);
  background-image: linear-gradient(top, #292929, #191919);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
  color: #ffffff;
}
.topbar div > ul .menu-dropdown .active a,
.nav .menu-dropdown .active a,
.topbar div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a {
  color: #ffffff;
}
.topbar div > ul .menu-dropdown .divider,
.nav .menu-dropdown .divider,
.topbar div > ul .dropdown-menu .divider,
.nav .dropdown-menu .divider {
  background-color: #222;
  border-color: #444;
}
.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
  padding: 4px 15px;
}
li.menu, .dropdown {
  position: relative;
}
a.menu:after, .dropdown-toggle:after {
  width: 0;
  height: 0;
  display: inline-block;
  content: "↓";
  text-indent: -99999px;
  vertical-align: top;
  margin-top: 8px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #ffffff;
  filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.menu-dropdown, .dropdown-menu {
  background-color: #ffffff;
  float: left;
  display: none;
  position: absolute;
  top: 40px;
  z-index: 900;
  min-width: 160px;
  max-width: 220px;
  width: 160px;
  margin-left: 0;
  margin-right: 0;
  padding: 6px 0;
  zoom: 1;
  border-color: #999;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 0 1px 1px;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.menu-dropdown li, .dropdown-menu li {
  float: none;
  display: block;
  background-color: none;
}
.menu-dropdown .divider, .dropdown-menu .divider {
  height: 1px;
  margin: 5px 0;
  overflow: hidden;
  background-color: #eee;
  border-bottom: 1px solid #ffffff;
}
.topbar .dropdown-menu a, .dropdown-menu a {
  display: block;
  padding: 4px 15px;
  clear: both;
  font-weight: normal;
  line-height: 18px;
  color: #808080;
  text-shadow: 0 1px 0 #ffffff;
}
.topbar .dropdown-menu a:hover,
.dropdown-menu a:hover,
.topbar .dropdown-menu a.hover,
.dropdown-menu a.hover {
  background-color: #dddddd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  background-image: linear-gradient(top, #eeeeee, #dddddd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
  color: #404040;
  text-decoration: none;
  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
}
.open .menu,
.dropdown.open .menu,
.open .dropdown-toggle,
.dropdown.open .dropdown-toggle {
  color: #ffffff;
  background: #ccc;
  background: rgba(0, 0, 0, 0.3);
}
.open .menu-dropdown,
.dropdown.open .menu-dropdown,
.open .dropdown-menu,
.dropdown.open .dropdown-menu {
  display: block;
}

Answer 1

如果您不使用jQuery并且需要在普通的javascript中执行此操作，那么您可以这样做：

// function called by click to toggle class on parent
function toggleMenu(item) {
    toggleClass(item.parentNode, "open");
    return(false);    // don't do other default handling for the click
}

// utility functions for adding, removing classes
function addClass(elem, cls) {
    var oldCls = elem.className;
    if (oldCls) {
        oldCls += " ";
    }
    elem.className = oldCls + cls;
}

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", "").replace(/^\s+/g, "").replace(/\s+$/g, "");
}

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}

function toggleClass(elem, cls) {
    if (hasClass(elem, cls)) {
        removeClass(elem, cls);
    } else {
        addClass(elem, cls);
    }
}

并且，在您的HTML中，我为一个项目添加了一个onclick处理程序：

 <ul>
    <li class="menu">
      <a href="#" onclick="toggleMenu(this)">Menu Heading</a>
    <ul class="menu-dropdown">
        <li><a href="http://google.com">Option 1</a></li>
        <li><a href="http://google.com">Option 2</a></li>
        <li><a href="http://google.com">Option 3</a></li>
        <li><a href="http://google.com">Option 4</a></li>
      </ul>
    </li>
  </ul>

工作演示：http://jsfiddle.net/jfriend00/2pVmF/

Answer 2

您已标记了问题toggleclass，这是一个特定于jQuery的标记。假设你真的使用jQuery，那么它是一个click处理程序和toggleClass的简单应用程序：

$(".menu").click(function() {
    // Toggle the class
    $(this).toggleClass("open");
});

如果你想做更进一步的事情，除了切换课程外：

$(".menu").click(function() {
    var $this = $(this);

    // Toggle the class
    $this.toggleClass("open");

    // Further work
    if ($this.hasClass("open")) {
        // The menu is now open, do stuff related to that...
    }
    else {
        // The menu is now closed, do stuff related to that...
    }
});

Answer 3

如果您正在使用支持classList的现代浏览器，您可以简单地使用：

 element.classList.toggle("open");

其中element是您想要“切换”css类的元素的引用。但是，jQuery和类似的库更适用于此类操作，尤其是与事件侦听器结合使用。

Answer 4

如果使用jquery使用

$(".menu").addClass("open");  
$(".menu").removeClass("open");