0

ネストされたメニューで、その要素がホバーされたときに要素のサブメニューを表示したいと考えています。

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

私は何を間違っていますか？

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

更新され た js スクリプトを置き換えるだけです ( fiddle 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-27T11:55:37.537 に答える
0

jQueryのセレクターが間違っています。ul内のmenu-main-menu-containerのクラスを探していますが、1つはありません。これを段階的にデバッグすることをお勧めします。最初に、使用するhtml要素を選択し、jQueryでアラートを実行します。これにより、適切な要素が選択されていることが示され、そこからその要素のイベントに進むことができます。

于 2012-08-27T11:54:17.940 に答える
0

jQueryセレクターの問題でした。クラス main-menu-... の ul を探していますが、クラス main-menu- の子孫である ul を探していません... これで問題が解決するはずです。

于 2012-08-27T12:11:06.757 に答える