以下是基本的工作下拉菜单,子级出现在父级悬停时。
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(100);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(100);
}
);
});
</script>
<style type="text/css">
#nav li {background-color:#CCC; }
</style>
<ul id="nav">
<li><a href="#" class="selected">Parent A</a>
<ul>
<li><a href="#">Item a1</a></li>
<li><a href="#" class="selected">Item a2</a></li>
<li><a href="#">Item a3</a></li>
</ul>
</li>
<li><a href="#">Parent B</a>
<ul>
<li><a href="#">Item b1</a></li>
<li><a href="#">Item b2</a></li>
<li><a href="#">Item b3</a></li>
<li><a href="#">Item b4</a></li>
</ul>
</li>
</ul>
目前,当悬停在父框区域的任何位置时(即也在文本之外,在父 div 的不可见区域),子项会出现。
我希望子链接仅在父链接悬停时出现(仅在“href”文本上)。
我在任何地方都找不到答案。
最佳答案
尝试使用 a
元素作为 hover
的目标而不是整个 li
,如下所示:
<script type="text/javascript">
$(document).ready(function () {
$('#nav ul').hide();
$('#nav li > a').hover(
function () {
//show its submenu
$('ul', this.parentNode).stop().slideDown(100);
}
);
$('#nav li').hover(null,
function (e) {
//hide its submenu
$('ul', this.parentNode).stop().slideUp(100);
}
);
});
</script>
查看工作 demo .
关于javascript - 悬停在父文本上的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13804909/