我正在 jQuery 中制作一个简单的下拉菜单。它工作正常。我有一个问题。
问题是,我需要保持活动页面下拉菜单处于展开状态 在下面的示例中,具有 .inpath 父级的子菜单需要始终保持展开状态。如果您将鼠标悬停在另一个菜单项上,它应该显示相关的子页面,当您将鼠标悬停时返回以显示活动的子页面。非常感谢任何帮助:-)!
我的html:
<div id="menu">
<ul>
<li><a href="">Hvem</a></li>
<li><a href="">Hvad</a>
<ul>
<li><a href="">Produkter</a></li>
<li><a href="">Leveringer</a></li>
</ul>
</li>
<li class="inpath"><a href="">Hvordan</a>
<ul>
<li><a href="">Reklame</a></li>
<li><a href="">PR</a></li>
<li><a href="">Websites</a></li>
<li><a href="">Illustrationer</a></li>
</ul>
</li>
<li class="last-item"><a href="">Sådan!</a></li>
</ul>
<div class="clear"><!--clearfix--></div>
</div>
我的 jQuery:
<script type="text/javascript">
//mouseenter, mouseover, hover
// mouseleave, mouseout,
$(document).ready(function () {
$('#menu ul li ul').hide();
$('#menu li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
</script>