Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 下拉菜单,无法使SlideDown()工作_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 下拉菜单,无法使SlideDown()工作

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="

我讨厌在这里张贴问题,因为我喜欢为自己找出一个解决方案,但我就是不能想出这个

我有一个导航菜单,是由wordpress吐出的,有3个深度。我正在尝试做一个大的下拉列表,我有它的运作只是css的罚款,但现在我正在寻找动画,只是有问题

下面是一个JSFIDLE:

代码如下:

    <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();
});