我有一个 css 多级下拉菜单，效果很好。
我想添加一些额外的 jQuery 代码，以便当您悬停时菜单保持打开状态。然后，您必须单击屏幕来关闭菜单(类似于 http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html 或 http://www.codenothing.com/archives/2009/multi-level-drop-down-menu/ )。
我添加了一些 jQuery(见下文)，这使得前两个级别/ul 按要求工作，但较低的级别没有保持打开状态。关于如何解决这个问题有什么想法吗？
这里是 Jsfiddle - http://jsfiddle.net/PSFk7/5/
jQuery 代码:
$('.top_level').mouseover(function(){
$('.megamenu_main').addClass('megamenu_main_over');
$('html').click(function() {
$('.megamenu li.top_level ul').removeClass('megamenu_main_over');
});
});
$('li.parent').mouseover(function(){
$('li.parent ul').removeClass('children_over')
$(this).children('ul').addClass('children_over');
$('html').click(function() {
$('ul').removeClass('children_over');
});
});
HTML 代码:
<div class="megamenu_container">
<ul class="megamenu megamenu_slide">
<li class="top_level"><span><a href="#">Main Page</a></span>
<ul class="megamenu_main">
<li><a href="#">Suspendisse</a></li>
<li><a href="#">Fusce porta</a></li>
<li class="parent"><a href="http://www.mysite.co.uk/mainpage/page-01">Page Level 01</a>
<ul class='children'>
<li><a href="#">Donec et enim</a></li>
<li><a href="#">Aliquam volutpat</a></li>
<li class="parent"><a href="#">Page Level 02</a>
<ul class='children'>
<li class="parent"><a href="#">Page Level 03</a>
<ul class='children'>
<li><a href="#">Page Level 04</a></li>
<li><a href="#">Proin sed nisi a sapien</a></li>
</ul>
</li>
<li><a href="#">Curabitur ultricies</a></li>
</ul>
</li>
<li><a href="#">Nunc sit amet</a></li>
<li class="parent"><a href="#">In aliquam orci</a>
<ul class='children'>
<li class="parent"><a href="#">Page Level 03 V2</a>
<ul class='children'>
<li><a href="#">Page Level 04 V2</a></li>
<li><a href="#">Proin sed nisi a sapien V2</a></li>
</ul>
</li>
<li><a href="#">Curabitur ultricies</a></li>
</ul>
</li>
<li><a href="#">Integer dignissim</a></li>
<li><a href="#">Praesent euismod tortor</a></li>
</ul>
</li>
<li><a href="#">Vestibulum quis velit</a></li>
<li><a href="#">Aliquam lacinia</a></li>
<li class="parent"><a href="#">Ut porttitor ipsum</a>
<ul class='children'>
<li class="parent"><a href="#">Page Level 01 V1</a>
<ul class='children'>
<li><a href="#">Page Level 02 V1</a></li>
<li><a href="#">Proin sed nisi a sapien V1</a></li>
</ul>
</li>
<li><a href="#">Curabitur ultricies</a></li>
</ul>
</li>
<li><a href="#">Mauris sit amet</a></li>
<li><a href="#">Praesent</a></li>
<li><a href="#">Nullam ornare</a></li>
</ul>
</li>
</ul>
</div>
CSS 代码:
.megamenu_container { height:55px; line-height:55px; margin:0; position:relative; float:left; z-index:9; background:#d55c4b; margin:0 17px 0 0; padding:0 39px; text-align:left; }
.megamenu_container a { text-decoration: none; }
.megamenu_main { list-style:none; padding:0; margin:0; }
.megamenu li.top_level { list-style:none; background:none; }
.megamenu .top_level > span { color:#FFF; line-height:55px; outline:0; text-decoration:none; }
.megamenu .top_level > span a { color:#FFF; }
.megamenu_main, .megamenu_main ul { position:absolute; top:-9999em; left:-9999em; width:167px; margin:0 0 40px -1px; padding:0; -webkit-box-shadow: 0 2px 5px #bbb; -moz-box-shadow: 0 2px 5px #bbb; -o-box-shadow: 0 2px 5px #bbb; box-shadow: 0 2px 5px #bbb; border:none; border-top:5px solid #d04734; background:#FFF; display:none; }
.megamenu > li:hover .megamenu_main { top:55px; left:1px; display:block; }
.megamenu > li .megamenu_main_over { top:55px; left:1px; display: block; }
.megamenu_main li:hover > ul { top:-5px; left:100%; display:block; }
.megamenu_main ul.children_over, .megamenu_main li.addmenu ul.children { top:-5px; left:100%; display:block; }
.megamenu_main li:hover > .left_dropdown { left:-100%; }
.megamenu_slide { top:30px; -webkit-transition: top 0.3s 0.2s, opacity 0 0.2s; -moz-transition: top 0.3s 0.2s, opacity 0 0.2s; -o-transition: top 0.3s 0.2s, opacity 0 0.2s; -ms-transition: top 0.3s 0.2s, opacity 0 0.2s; transition: top 0.3s 0.2s, opacity 0 0.2s; }
.megamenu_slide ul { left:80%; -webkit-transition: left 0.2s 0.2s, opacity 0 0.2s; -moz-transition: left 0.2s 0.2s, opacity 0 0.2s; -o-transition: left 0.2s 0.2s, opacity 0 0.2s; -ms-transition: left 0.2s 0.2s, opacity 0 0.2s; transition: left 0.2s 0.2s, opacity 0 0.2s; }
.megamenu_slide li > .left_dropdown { left:-80%; }
.parent, .megamenu_main .dropdown_arrow { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); background-repeat: no-repeat; background-position: 96% 48%; }
.parent:hover, .megamenu_main .dropdown_arrow:hover { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); }
.megamenu_main li a { text-decoration: none; color:#4d4d4d; font-size:12px; }
.megamenu_main li { border-bottom:1px solid #e5e5e5; line-height:0.8em; margin:0; padding:9px 27px 9px 13px; }
.megamenu_main li a:hover { color:#d04734; }
.megamenu_main > li a { font-weight:bold; }
.megamenu_main > li ul { list-style: none; padding:0; margin:0; min-height:408px; }
.megamenu_main > li ul li a { font-weight:normal; }
.main_opened li, .megamenu_main > li ul li { position:static; -webkit-transition: background-color 0.3S; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; transition: background-color 0.3s; }
最佳答案
您当前正在删除鼠标悬停时的所有 children_over 类 ($('li.parent ul').removeClass('children_over'))，这会破坏您的脚本。
相反，仅从兄弟树中删除这些类(即不是当前元素的父项)
您可以使用此行来完成此操作:
$(this).siblings().find('ul').removeClass('children_over');
这是修改后的 fiddle :http://jsfiddle.net/PSFk7/8/
希望有帮助:)
关于jquery - CSS 多级下拉菜单以及附加的 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15897362/