与jQuery的嵌套菜单

在嵌套菜单中，我想在元素悬停时显示元素的子菜单。与jQuery的嵌套菜单

HTML：

<div id="menu"> 
    <div class="menu-main-menu-container"> 
     <ul> 
      <li id="mojo_page_list_index" class="mojo_active"><a href="http://localhost/index.php">Home</a></li> 
      <li id="mojo_page_list_over"><a href="http://localhost/index.php/over">Over</a> 
       <ul> 
        <li id="mojo_page_list_bedrijfsprofiel"><a href="http://localhost/index.php/bedrijfsprofiel">Bedrijfsprofiel</a></li> 
        <li id="mojo_page_list_geschiedenis"><a href="http://localhost/index.php/geschiedenis">Geschiedenis</a></li> 
       </ul> 
      </li> 
      <li id="mojo_page_list_contact"><a href="http://localhost/index.php/contact">Contact</a></li> 
     </ul> 
    </div> 
</div>

的jQuery：

(function($){ 
    $(document).ready(function(){ 
     $("ul.menu-main-menu-container li").hover(function() {       
      $(this).addClass("hover"); 
      $('ul:first', this).css({visibility: "visible",display: "none"}).slideDown(200); 
     }, function() { 
      $(this).removeClass("hover"); 
      $('ul:first', this).css({visibility: "hidden"}); 
     }); 

     if (! ($.browser.msie && ($.browser.version == 6))){ 
      $("ul.menu-main-menu-container li ul li:has(ul)").find("a:first").addClass("arrow"); 
     }    
    }); 
})(window.jQuery);

我在做什么错？

来源

2012-08-27 Ricardo Jacobs

你对“不起作用”是什么意思？你期望什么，以及实际发生了什么？ – Asciiom

你在jQuery中的选择是错误的。它在ul中查找菜单 - 主菜单 - 容器的类，并且没有一个。我建议你分阶段进行调试，首先选择你要浏览的html元素，并在jQuery中做一个警报。这将显示您选择了正确的元素，然后您可以从那里与该元素上的事件一起去。

来源

2012-08-27 11:54:17 cih

事情是这样的：

<div id="menu"> 
    <div class="menu-main-menu-container"> 
    <ul> 
     <li id="mojo_page_list_index" class="mojo_active"><a href="http://localhost/index.php">Home</a></li> 
     <li id="mojo_page_list_over"><a href="http://localhost/index.php/over">Over</a> 
      <ul style="display:none;"> 
       <li id="mojo_page_list_bedrijfsprofiel"><a href="http://localhost/index.php/bedrijfsprofiel">Bedrijfsprofiel</a></li> 
       <li id="mojo_page_list_geschiedenis"><a href="http://localhost/index.php/geschiedenis">Geschiedenis</a></li> 
      </ul> 
     </li> 
     <li id="mojo_page_list_contact"><a href="http://localhost/index.php/contact">Contact</a></li> 
    </ul> 
    </div> 
</div> 

    jQuery(function(){ 
     $(".menu-main-menu-container ul li").hover(function() {       
      $(this).addClass("hover"); 
      $('ul:first', this).css({display: "none"}).slideDown(200); 
     }, function() { 
      $(this).removeClass("hover"); 
      $('ul:first', this).css({display: "hidden"}); 
     }); 
    });

更新只需更换您的JS脚本在你（小提琴http://jsfiddle.net/kL8RF/1/）

jQuery(function(){ 
    $("#menu li").hover(function() {       
     $(this).addClass("hover"); 
     $('ul', this).slideDown(100); 
    }, function() { 
     $(this).removeClass("hover"); 
     $('ul', this).slideUp(100); 
    }); 
});

来源

2012-08-27 11:55:37 Oyeme

我尝试了所有的选择，并且到目前为止：jsfiddle.net/kL8RF/1我认为样式表存在问题。但通过这种方式学习很有趣。有没有人可以帮助我，并告诉我现在使用这个样式表我现在做错了什么？ –

@RicardoJacobs我更新了我的代码。 – Oyeme

这是jQuery选择问题。它正在寻找与类主菜单-... UL，但不寻找一个类是主菜单后裔的UL -... This应该解决您的问题。

来源

2012-08-27 12:11:06

与jQuery的嵌套菜单

回答

相关问题