菜单切换元素

Question

我正在重新设计一个WHMCS菜单，使其具有响应性和触敏性。除了一件事，一切都很好。我无法正确显示/切换正确的元素。

jQuery脚本的作用是将“open”类添加到父元素onclick。所以

<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>

变为：

<div id="menu-icon" class="open"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>

点击“菜单”链接时。

我默认需要“#nav”到“display：none”，单击“Menu”时需要“display：block”。我无法通过CSS捕获它。

我的HTML

<nav id="nav-wrap">
<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
<ul id="nav">

我的CSS

#nav-wrap #nav {
    display: none;
}
#nav-wrap #menu-icon.open #nav {
    display: block;
}

使用上面的代码，我可以默认隐藏#nav，但就是这样。有关如何捕获#nav？

的任何指示

Answer 1

老板，你已经犯了根本性的错误。

您已经提供了此代码：

<nav id="nav-wrap">
    <div id="menu-icon">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
    </div>
    <ul id="nav">​

请注意，#nav不属于#menu-icon。将代码更改为：

<nav id="nav-wrap">
    <div id="menu-icon">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
        <ul id="nav">​
    </div>

它有效！

在这里演示：http://jsfiddle.net/qqbUY/

截图