0

In a nested menu, I want to show the submenu of an element when that element is hovered over.

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

What am I doing wrong?

4

3 回答 3

1

像这样的东西：

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

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

jQuery(function(){ 
   $("#menu li").hover(function () {                          
        $(this).addClass("hover");
        $('ul', this).slideDown(100);  
    }, function () {
        $(this).removeClass("hover");
        $('ul', this).slideUp(100);
    });
});​
于 2012-08-27T11:55:37.537 回答
0

这是 jQuery 选择器问题。它正在寻找一个带有 main-menu-... 类的 ul... 但不是在寻找一个 ul 是 class main-menu-... 的后代... 这应该可以解决您的问题。

于 2012-08-27T12:11:06.757 回答
0

您在 jQuery 中的选择器是错误的。它在 ul 中寻找菜单主菜单容器类，但没有。我建议你分阶段调试它，首先选择你想要的 html 元素并在 jQuery 中发出警报。这将显示您选择了正确的元素，然后您可以从那里开始处理该元素上的事件。

于 2012-08-27T11:54:17.940 回答