Javascript 下拉菜单,无法使SlideDown()工作
我讨厌在这里张贴问题,因为我喜欢为自己找出一个解决方案,但我就是不能想出这个 我有一个导航菜单,是由wordpress吐出的,有3个深度。我正在尝试做一个大的下拉列表,我有它的运作只是css的罚款,但现在我正在寻找动画,只是有问题 下面是一个JSFIDLE: 代码如下:Javascript 下拉菜单,无法使SlideDown()工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我讨厌在这里张贴问题,因为我喜欢为自己找出一个解决方案,但我就是不能想出这个 我有一个导航菜单,是由wordpress吐出的,有3个深度。我正在尝试做一个大的下拉列表,我有它的运作只是css的罚款,但现在我正在寻找动画,只是有问题 下面是一个JSFIDLE: 代码如下: <div id="mid-nav"> <ul id="midnav"> <ul id="topmenu-{topmenu slug}[-{increment}]" class="
<div id="mid-nav">
<ul id="midnav">
<ul id="topmenu-{topmenu slug}[-{increment}]" class="topmenu">
<li id="nav-menu-item-62" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item"><a href="http://www.renewmywindows.com/" class="menu-link main-menu-link">Home</a></li>
<li id="nav-menu-item-68" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/why-renewal/" class="menu-link main-menu-link">Why Renewal</a>
<ul id="testtt" class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-69" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/why-renewal/fibrex/" class="menu-link sub-menu-link">Fibrex</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-70" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/why-renewal/fibrex/history-of-firex/" class="menu-link sub-menu-link">History of firex</a></li>
<li id="nav-menu-item-71" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/why-renewal/fibrex/what-is-fibrex/" class="menu-link sub-menu-link">What is fibrex</a></li>
</ul>
</li>
<li id="nav-menu-item-72" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/why-renewal/green-seal-cert/" class="menu-link sub-menu-link">Green Seal Cert</a></li>
<li id="nav-menu-item-75" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/why-renewal/renewal-warranty/" class="menu-link sub-menu-link">Renewal Warranty</a></li>
<li id="nav-menu-item-76" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/why-renewal/what-to-look-for/" class="menu-link sub-menu-link">What to look for</a></li>
</ul>
</li>
<li id="nav-menu-item-63" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/about/" class="menu-link main-menu-link">About</a>
<ul class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-148" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/about/our-pledge/" class="menu-link sub-menu-link">Our Pledge</a></li>
<li id="nav-menu-item-149" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/about/testimonials/" class="menu-link sub-menu-link">Testimonials</a></li>
<li id="nav-menu-item-146" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/about/articles/" class="menu-link sub-menu-link">Articles</a></li>
<li id="nav-menu-item-147" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/about/contact-us/" class="menu-link sub-menu-link">Contact us</a></li>
<li id="nav-menu-item-145" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/about/appointment-calendar/" class="menu-link sub-menu-link">Appointment Calendar</a></li>
</ul>
</li>
<li id="nav-menu-item-150" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/windows/" class="menu-link main-menu-link">Windows</a>
<ul class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-151" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/windows/double-hung/" class="menu-link sub-menu-link">Double Hung</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-152" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/double-hung/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-153" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/double-hung/glass/" class="menu-link sub-menu-link">Glass</a></li>
<li id="nav-menu-item-154" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/double-hung/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-155" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/double-hung/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-156" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/double-hung/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-157" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/windows/gliding/" class="menu-link sub-menu-link">Gliding</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-158" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/gliding/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-159" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/gliding/glass/" class="menu-link sub-menu-link">Glass</a></li>
<li id="nav-menu-item-160" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/gliding/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-161" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/gliding/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-162" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/gliding/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-163" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/windows/casement/" class="menu-link sub-menu-link">Casement</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-164" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/casement/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-165" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/casement/glass/" class="menu-link sub-menu-link">Glass</a></li>
<li id="nav-menu-item-166" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/casement/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-167" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/casement/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-168" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/casement/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-169" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/windows/awning/" class="menu-link sub-menu-link">Awning</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-170" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/awning/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-171" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/awning/glass/" class="menu-link sub-menu-link">Glass</a></li>
<li id="nav-menu-item-172" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/awning/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-173" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/awning/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-174" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/awning/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-175" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/baybow/" class="menu-link sub-menu-link">Bay/bow</a></li>
<li id="nav-menu-item-176" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/windows/specialty/" class="menu-link sub-menu-link">Specialty</a></li>
</ul>
</li>
<li id="nav-menu-item-66" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/doors/" class="menu-link main-menu-link">Doors</a>
<ul class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-177" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/doors/narroline-gliding/" class="menu-link sub-menu-link">Narroline gliding</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-178" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/narroline-gliding/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-179" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/narroline-gliding/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-180" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/narroline-gliding/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-181" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/narroline-gliding/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-188" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/doors/frenchwood-hinged/" class="menu-link sub-menu-link">Frenchwood hinged</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-196" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-hinged/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-195" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-hinged/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-194" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-hinged/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-193" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-hinged/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-187" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/doors/frenchwood-gliding/" class="menu-link sub-menu-link">Frenchwood gliding</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-192" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-gliding/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-191" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-gliding/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-190" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-gliding/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-189" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/frenchwood-gliding/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
<li id="nav-menu-item-186" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://www.renewmywindows.com/doors/perma-shield-gliding/" class="menu-link sub-menu-link">Perma Shield Gliding</a>
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-183" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/perma-shield-gliding/colors/" class="menu-link sub-menu-link">Colors</a></li>
<li id="nav-menu-item-182" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/perma-shield-gliding/grilles/" class="menu-link sub-menu-link">Grilles</a></li>
<li id="nav-menu-item-185" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/perma-shield-gliding/hardware/" class="menu-link sub-menu-link">Hardware</a></li>
<li id="nav-menu-item-184" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.renewmywindows.com/doors/perma-shield-gliding/screens/" class="menu-link sub-menu-link">Screens</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</div>
还有我的借口jQuery的巨大失败:
<script type="text/javascript">
$(document).ready(function () {
// $("#nav-menu-item-68").hover(function(){
// console.log($(this));
// $("#testtt").slideDown( 10000,function(){
// alert("The slideDown() method is finished!"); });
// console.log($(this).children('ul'));
// },function(){
// $(this).find('ul').slideUp( "fast" );
//
// });
//cache nav
var nav = $("#mid-nav");
//add indicator and hovers to submenu parents
nav.find("li").each(function () {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$("#nav-menu-item-68").mouseenter(function () {
$("#testtt").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function () {
$("testtt").stop(true, true).slideUp();
});
}
});
});
</script>
这是我第一次尝试,但没有任何效果。我使用控制台日志记录来确保在其他情况下,我选择了正确的类/id
然后我做的下一件事与上面类似,但它只会滑动文本,而不会滑动整个内容
我已经想了很久了!啊
谢谢
C我不知道问题出在哪里,它看起来很生动……是的,当我悬停时,新链接会向下滑动。哦,没关系,我单击了一个链接,它就转到了实际的站点。我想不,不是在小提琴上,对不起。我会再检查一遍。整理好,在fiddle中启用jQuery,修复了脚本中的一个语法错误:仍然不工作,但当我悬停时它会疯狂地滑动,也许你可以从这里开始工作。谢谢,我相信这都是CSS问题!怎么了?
<script type="text/javascript">
$(document).ready(function () {
// $("#nav-menu-item-68").hover(function(){
// console.log($(this));
// $("#testtt").slideDown( 10000,function(){
// alert("The slideDown() method is finished!"); });
// console.log($(this).children('ul'));
// },function(){
// $(this).find('ul').slideUp( "fast" );
//
// });
//cache nav
var nav = $("#mid-nav");
//add indicator and hovers to submenu parents
nav.find("li").each(function () {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$("#nav-menu-item-68").mouseenter(function () {
$("#testtt").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function () {
$("testtt").stop(true, true).slideUp();
});
}
});
});
</script>
$(".topmenu").children('li').hover(function(){
$(this).slideDown();
});