3

クリックする<ul>と、別の の可視性を切り替えることができます<ul>。<ul>が表示されたときにページの本文にイベントを添付して、本文が を非表示にするにはどうすればよいですか<ul>。

私はこの種の泡立つものを書くのは初めてで、これまで行ってきたことが断続的に機能するように見える理由を理解できません。open数回クリックすると、セカンダリ<ul>を開いたときにクラスの追加に失敗します。

そしてもちろん、これを行うための完全に優れた方法があるかもしれません。

$(document).on('click', '.dd_deploy', function (e) {
    var ul = $(this).children('ul');
    var height = ul.css('height');
    var width = ul.css('width');
    ul.css('top', "-" + height);
    ul.fadeToggle(50, function () {

        //add open class depending on what's toggled to
        if (ul.hasClass('open')) {
            ul.removeClass('open');
        } else {
            ul.addClass('open');
        }
        //attach click event to the body to hide the ul when
        //body is clickd
        $(document).on('click.ddClick', ('*'), function (e) {
            e.stopPropagation();
           //if (ul.hasClass('open')) {
                ul.hide();
                ul.removeClass('open')
                $(document).off('click.ddClick');
           // }
        });
    });
});​

http://jsfiddle.net/JYVwR/

4

2 に答える 2

2

バインドを解除する場合でも、クリック イベントにクリック イベントをバインドしないことをお勧めします。代わりに、私はこのようにします：

http://jsfiddle.net/JYVwR/2/

$(document).on('click', function (e) {
    if ( $(e.target).is(".dd_deploy") ) {
        var ul = $(e.target).children('ul');
        var height = ul.css('height');
        var width = ul.css('width');
        ul.css('top', "-" + height);
        ul.fadeToggle(50, function () {

            //add open class depending on what's toggled to
            if (ul.hasClass('open')) {
                ul.removeClass('open');
            } else {
                ul.addClass('open');
            }
        });
    }
    else {
        $('.dd_deploy').children('ul:visible').fadeOut(50,function(){
            $(this).removeClass("open");
        })
    }
});​

開いているメニューをクリックしてもメニューが閉じられないようにする必要がある場合は、そのメニューの子をテストする else if を追加します。

于 2012-12-21T20:20:46.970 に答える
-1

そのすべてのコードは本当に必要ありません。必要なのは、目的を達成するための jquery のトグルクラスだけです。以下のような単純なコードが機能するはずです。

サンプルコード

$(document).ready(function() {
    $('ul.dd_deploy').click(function(){
        $('ul.dd').toggle();
    });
});​​​​

まず、根本的に間違っているdocument.on関数内でdocument.on関数を定義しています。一度チェックして、ドキュメントの準備ができたら関数を実行するだけです。

第二に、なぜイベントをにバインドしたいのbody.clickですか? それは本当に良い考えではありません。

提案

この場合に役立つ可能性のあるホバー機能も確認する必要があると思います。

働くフィドル

クリック機能付き JSfiddleホバー機能付きJSfiddle

于 2012-12-21T20:26:09.123 に答える