每次单击时在2个类之间切换
switch between 2 classes on each click
我正试图弄清楚如何在以下内容之间进行更改：
<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;
}
如果您不使用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/
您已将问题标记为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...
}
});
如果您使用的是支持classList的现代浏览器，您可以简单地使用：
element.classList.toggle("open");
其中element是对要"切换"css类的元素的引用。然而，jQuery和类似的库更适合这种操作，尤其是与事件侦听器结合使用时。
如果使用jquery，请使用
$(".menu").addClass("open");
$(".menu").removeClass("open");
相关文章：
- 如何在javascript中获取两个日期之间的周六和周日的日期
- 在Google Analytics中跟踪用户，但只能在两个操作之间跟踪
- 如何在两个不同的iframe HTML之间进行通信
- 有效地获取两个区间之间的随机整数
- 如何用moment.js列出两个日期之间的所有月份
- jQuery在两个字符串标识符之间选择HTML
- 定时循环，使用Javascript在2个循环之间间隔x秒
- JavaScript中的RegEx:两个标签之间的内容
- moment.js在两个时区格式的日期之间存在差异
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 计算HTML表TD中两个数字之间的百分比
- 用时间戳获取两个不同日期之间的时间差
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- 如何在jQuery中获取两个事件之间的时间差
- 通过node.js和socket.io在两个用户之间发送消息
- JavaScript函数，用于计算两个日期之间的年、月和天数
- 有没有一种方法可以从两个标签之间提取文本，并以我选择的格式输出
- 在两个多选字段之间移动选项
- 通过变量在两个数字之间切换
- 如何在Protractor中比较两个窗口之间两个元素的值
