我希望在这个手风琴菜单上增加一个subnav。我试图将一个子元素添加到nav ul li中,但这似乎不起作用。理想情况下,我希望能够在" web"下列出网络项目。并打印"打印"。
FIDDLE: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>
答案 0 :(得分: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
以下是您案件的重要信息:
.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;
}
答案 1 :(得分:1)
我已更新你的js
$('.nav, .nav li ul').hide();
$('#show').click(function () {
$(".nav").toggle();
$("span").toggle();
});
$('.nav li').click(function(){
$(this).children('ul').toggle();
});
<强> Updated jsFiddle File 强>