开关点击

我试图找出如何在此之间切换：开关点击

  <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: "&darr;"; 
    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; 
}

来源

2012-07-28 n00bstacker

你已经标记了你的问题'toggleclass' - 你在使用jQuery吗？为什么你没有标记问题'jquery'？ – 2012-07-28 21:57:29

从发布您的问题起4个小时，没有回复澄清或提供的答案！这并不酷。我知道你知道要提问，但你应该在发帖后的一小时内（理想情况下在发帖后15分钟内）阅读评论和答案，以确保你的问题被理解，并且你的意思没有混淆。您也可以提供有关答案方向的反馈。在这种情况下，我们不知道您是否可以使用jQuery。 – jfriend00 2012-07-29 02:13:48

道歉，我张贴并去睡觉。没意识到你们会有多快！谢谢！ – n00bstacker 2012-07-29 09:44:21

如果你不使用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/

来源

2012-07-28 22:35:32 jfriend00

谢谢你的演示。不确定如何实现这一点。我尝试将它放在

您已经标记问题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... 
    } 
});

来源

2012-07-28 22:03:36

-1

如果使用jQuery使用

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

来源

2012-07-28 22:05:41 Dru

如果你正在使用支持classList现代浏览器的工作，你可以简单的有：

element.classList.toggle("open");

其中element是参考ele你想要“切换”CSS类。然而，jQuery和类似的库更适合这种操作，特别是与事件监听器结合使用。

来源

2012-07-28 23:26:56 ZER0

回答

相关问题