菜单切换元素

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”，单击菜单时需要“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/

截图