0

我希望这个手风琴菜单有一个额外的子导航。我尝试将子元素添加到 nav ul li，但这似乎不起作用。理想情况下，我希望能够在“web”下列出 web 项目并在“print”下打印。

小提琴：http : //jsfiddle.net/schermerb/rGMAu/1/

.header button {
    cursor:pointer;
    float:right;
    padding:5px;
    margin:10px 10px;
    border:none;
    border:1px solid #ececec;
    background:#444;
    color:#ececec;
}
.nav {
    text-align:center;
    background:#444;
}
.nav ul li {
    text-transform:capitalize;
    display:block;
    border-bottom:1px solid #ececec;
}
.nav a {
    display:block;
    padding:10px;
    color:#ececec;
}
.nav a:hover {
    background:#029b9d;
    color:#ececec;
}

<button id="show">Menu <span>+</span>  <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Web</a>

        </li>
        <li><a href="#">Print</a>

        </li>
    </ul>
</div>
4

2 回答 2

1

添加子元素是正确的路径。

http://jsfiddle.net/jonigiuro/rGMAu/2/

<li><a href="#">Web</a>
    <ul class="sub">
        <li class="item">item1</li>
        <li class="item">item2</li>
    </ul>
</li>

您默认隐藏子元素，当您将鼠标悬停在父元素上时，您会显示它：

ul li:hover ul

这是您案例的相关CSS：

.nav ul li ul {
    color: red;
    margin: 0;
    padding: 0;
    display: none;
}

.nav ul li:hover ul {
    display: block;
}

.nav ul li ul li {
    padding: 10px 0;
}
于 2013-09-05T07:17:14.933 回答
1

我已经更新了你的 js

$('.nav, .nav li ul').hide();
$('#show').click(function () {
    $(".nav").toggle();
    $("span").toggle();
});
$('.nav li').click(function(){
    $(this).children('ul').toggle();
});

更新了 jsFiddle 文件

于 2013-09-05T07:20:03.927 回答