0

いきなり本題に入ります。基本的に、次の HTML 構造があります。

<div id="global-container">
    <div class="content-pusher">
        <a class="mobile-menu-btn" href="#">Mobile menu btn</a>
    </div>
</div>

そして次の JavaScript/jQuery:

$(function() {
    // Side panel.
    $('.content-pusher').click(function(e) {
        $this = $(this);
        if ($this.parents('#global-container').hasClass('side-panel-open'))
        {
            $this.parents('#global-container').removeClass('side-panel-open');
        }
    });

    $('.mobile-menu-btn').click(function(e) {
        e.preventDefault();

        $('#global-container').addClass('side-panel-open');
    });
});

問題は、a をクリックしたときにクラスを追加し、div をクリックしたときにside-panel-openクラスを削除したいということです。#global-containerMobile menu btncontent-pusher

問題： クリックすると、クラスがdivMobile menu btnに追加され、内部にあるためすぐに削除されます。（そのdivの外に置くことはできません）。side-panel-open#global-containerMobile menu btncontent-pusher

最初は$('.content-pusher').click...トリガーが機能する前に考えていましたが、その関数の後にこのクラスが追加されても、div$('.mobule-menu-btn').click...にクラスがあるかどうかを確認するとTRUEを返すため、機能しません。side-panel-open#global-container

JSFiddle: http://jsfiddle.net/xFdKx/

4

2 に答える 2

1

mobile-menu-btn要素からのクリックイベントの伝播を防ぐことができます

$(function () {
    // Side panel.
    $('.content-pusher').click(function (e) {
        //since you have the id of the element there is no need to use the parents method here
        $('#global-container').removeClass('side-panel-open');
        //$(this).parents('#global-container').removeClass('side-panel-open');
    });

    $('.mobile-menu-btn').click(function (e) {
        $('#global-container').addClass('side-panel-open');
        return false;
    });
});

デモ:フィドル

于 2013-10-30T11:43:47.447 に答える
1

#global-containerのクリックを処理し、クリックがどこから発生したかを確認することをお勧めします。

$('#global-container').on('click', 'div.content-pusher, a.mobile-menu-btn', function(e){
    $('#global-container').toggleClass('side-panel-open', $(e.target).is('a.mobile-menu-btn'));
});

JS フィドルのデモ。

参考文献:

于 2013-10-30T11:51:38.137 に答える