0

ログアウトボタンなどを備えた小さなドロップダウンプロファイルメニューがあります。ボタンをクリックするとメニューを表示し、ページまたはボタンの任意の場所をクリックすると非表示にする必要があります。

<div id='menu'>
    <ul>
        <li class='has-sub'> <a class="testbutton" id="userButton" onclick="dropdown()" href="#">
                            <span id="buttonText">User name</span> <span id="triangleDown">&#9662;</span>
                        </a>

            <ul id="submenu">
                <li class='has-sub'><a href='#'><span>Change password</span></a>
                </li>
                <li class='has-sub'><a href='logout.php?action=0'><span>Logout</span></a>
                </li>
            </ul>
        </li>
    </ul>
</div>

JavaScript を使用しました。現時点では、プロファイル ボタンをクリックした場合にのみ、メニューが非表示で表示されます。また、document.ready などを使用して関数を開始する方法も知っています。

私の動作しないコード:

function dropdown() {
    if ($('#submenu').css('visibility') == 'hidden') {
        $('#submenu').css('visibility', 'visible');
    } else {
        $('#submenu').css('visibility', 'hidden');
    }
};

$(document).click(function (event) {
    if ($('#submenu').css('visibility') == 'visible') {
        $('#submenu').css('visibility', 'hidden');
    }
});

しかし、この方法を組み合わせるとうまくいきません。そのため、ボタンをクリックしてメニューを開くと、何も起こりませんでした。

私の英語でごめんなさい:)事前に助けてくれてありがとう。

4

2 に答える 2

2

これは、イベント伝播と呼ばれるものと一部関係があります。簡単に言うと、これは、クリック イベントがクリックされた要素だけでなく、その要素の親要素または祖先要素にも登録されることを意味します。

したがって、DIV をクリックすると、DIV は BODY 内にあるため、イベントは BODY にも登録されます。抽象的に言えば、キッチンが犯罪の現場なら、そのキッチンのあるアパートも犯罪の現場です。一方は他方の中にあります。

これは、伝播を防止することによって防止されます。jQuery では、イベント ハンドラーに自動的に渡されるオブジェクトのstopPropagation()メソッドを実行します。evt

いずれにせよ、状況は大幅に簡素化できます。

var menu = $('#menu'), but = $('#menu_button');
$(document).on('click', '*', function(evt) {
    evt.stopPropagation(); //<-- stop the event propagating to ancestral elements
    if ($(this).is(but))   //<-- on button click, toggle visibility of menu
        menu.toggle();
    else if (!$(this).closest(menu).length) //<-- on click outside, hide menu
        menu.hide();
});

前提: トグル ボタンは、セレクター「#menu_button」を介してターゲットにできると想定しています。必要に応じてこれを更新します。また、コードは DOM 対応ハンドラー内で実行する必要があります。

コードは、任意の要素へのクリックをリッスンします。ボタンに登録されている場合、メニューの表示状態が切り替えられます。メニューの外側の要素に対するものである場合、メニューは非表示になります。(後者の場合、メニューが既に非表示になっている場合、これは効果がありません。)

これは、このアプローチを示す実際の JS Fiddleです。

于 2013-09-01T19:54:15.623 に答える
1

これを試して：

$(function() {

    $('.test-button').click(function(event) {
        event.stopPropagation();
        $('#submenu').toggle();
    });

    $('body').click(function() {
        var submenu = $('#submenu');
        if(submenu.is(":visible")) {
            submenu.hide();
        }
    })


});
于 2013-09-01T20:05:16.183 に答える