这是我的XHTML代码:
<ul id="MenuBar1">
<li>
<div class="menuBox">Category 1</div>
</li>
<li class="hasasubmenu">
<div class="menuBox">Category 2</div>
<ul>
<li><a href="link.html">Link 1</a></li>
<li><a href="link.html">Link 2</a></li>
<li><a href="link.html">Link 3</a></li>
</ul>
</li>
<li class="hasasubmenu">
<div class="menuBox">Category 3</div>
<ul>
<li><a href="link.html">Link</a></li>
<li><a href="link.html">Link</a></li>
</ul>
</li>
<li>
<div class="menuBox">Category 4</div>
</li>
</ul>
实际上,我想创建一个带悬停交互的菜单来显示子链接。 (无论如何,标准菜单:))
这是我的JS代码:
/* menu handler */
$(document).ready(function(){
$('#MenuBar1 li.hasasubmenu').hover(function(){
**(selector that select the sub <ul> of the hovered <li>)**.toggle();
});
});
你能帮我找到用于切换的选择器(JS代码中的粗体(**))吗?
答案 0 :(得分:3)
/* menu handler */
$(document).ready(function(){
$('#MenuBar1 li.hasasubmenu').hover(function(){
$(this).children('ul').toggle(); // select the ul
});
});
答案 1 :(得分:2)
你为什么要使用jQuery?你可以只用CSS做到这一点 http://jsfiddle.net/XBdAL/
<ul>
<li>List Item 1</li>
<li>List Item 1
<ul>
<li>List Item 2</li>
<li>List Item 2
</ul>
</li>
</ul>
和CSS
ul {
list-style: none;
width: 150px;
}
li {
position: relative;
border: 1px solid #ffffff;
}
li:hover {
z-index: 1;
cursor: pointer;
}
ul ul {
position: absolute;
display: none;
left: 140px;
top: 4px;
}
li:hover ul ul {
display: none;
}
li:hover ul, li:hover li:hover ul {
display: block;
}
我应该只使用CSS,因为有些用户/浏览器不支持JS。