-1

jQuery と CSS を使用してドロップダウン メニューのスタイルを設定するセクシーなドロップダウン メニューをご存知の方も多いと思います。

矢印トリガーをクリックすると、ドロップダウン メニューが表示され、ホバー アウトすると非表示になります。

私の問題は、外側をクリックするとドロップダウンメニューを非表示にできないことです。インターネットで検索しましたが、残念ながら何も見つかりませんでした。

私のコードは次のとおりです。

jQuery(document).ready(function($){
    $('li:has(ul)').addClass('has-children');

    // Sexy Drop Down Menu
    $('li.has-children').append('<span class="dropdown"></span>'); // Adding a span tag with .dropdown class to <li> with child elements

    $("li.has-children .dropdown").click(function(){ // When trigger is clicked...

        // Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.sub-menu").slideDown('fast').show(); // Drop down the subnav on click

        $(this).parent().hover(function(){
        }, function(){
            $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
        });
    });
});

に置き換えようとしまし$(this).parent().hover(function(){た$(this).parent().click(function(){が、うまくいきませんでした。

誰かがこの問題を手伝ってくれますか?

前もって感謝します。

4

2 に答える 2

0

交換

$(this).parent().hover(function(){

と

$('html').click(function(){

ページの他の場所をクリックすると、ページが閉じます（外側をクリックするという意味だと思います）。

メニューを閉じるためにいくつかのサイトでこれを使用しました。z-indexの問題が発生すると予想していたため、テストなしですべてのサイトで機能することを保証するのは困難ですが、私の場合は初めて機能しました.

アップデート：

交換

    $(this).parent().hover(function(){
    }, function(){
        $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
    });

と

    $('html').click(function(){
        $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
    });
于 2013-04-22T10:54:31.343 に答える