0

現在、次のスクリプトを使用してドロップダウンメニューを操作しているため、ユーザーがメニュー項目をクリックするとドロップが表示され、現在画面外の任意の場所をクリックしてメニューを非表示にできますが、機能を追加する方法を知りたいと思っていましたメニュー項目をもう一度クリックしてドロップダウンを非表示にします (項目の外側の任意の場所をクリックするオプションは保持したまま)。これを実装するのは難しいですか？

$(document).ready(function() {
    /* for keeping track of what's "open" */
    var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
    /* hides the current menu */
    var hideMenu = function() {
        if(showingDropdown) {
            showingDropdown.removeClass(activeClass);
            showingMenu.hide();
        }
    };

    /* recurse through dropdown menus */
    $('.dropdown').each(function() {
        /* track elements: menu, parent */
        var dropdown = $(this);
        var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();
        /* function that shows THIS menu */
        var showMenu = function() {
            hideMenu();
            showingDropdown = dropdown.addClass('dropdown-active');
            showingMenu = menu.show();
            showingParent = parent;
        };
        /* function to show menu when clicked */
        dropdown.bind('click',function(e) {
            if(e) e.stopPropagation();
            if(e) e.preventDefault();
            showMenu();
        });
        /* function to show menu when someone tabs to the box */
        dropdown.bind('focus',function() {
            showMenu();
        });
    });

    /* hide when clicked outside */
    $(document.body).bind('click',function(e) {
        if(showingParent) {
            var parentElement = showingParent[0];
            if(!$.contains(parentElement,e.target) || !parentElement == e.target) {
                hideMenu();
            }
        }
    });
});

以下の答えに基づいた私の試みは次のとおりです。

/* function to show menu when clicked */
dropdown.bind('click',function(e) {
    if (!dropdown.data('open')) {
    dropdown.data'(open', true);
    // open menu
    } else {
    dropdown.data('open', false);
    // close menu
    }

});

エラーが発生していますが、間違って再生したか、何かを上書きしたと思いますか？これは、この回答で編集された唯一のセクションであるため、上記のコードの単なるセクションです。

ありがとう

4

1 に答える 1

0

できることは、jQuery.data（）を使用して、たとえば、状態に応じてtrueまたはfalseと呼ばれるopenという変数を設定することです。だからあなたはこのようなものになることができます。

if (!dropdown.data('open')) {
dropdown.data'(open', true);
// open menu
} else {
dropdown.data('open', false);
// close menu
}
于 2012-04-12T10:22:19.327 に答える