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 时添加一个类side-panel-open，并在单击div 时将其删除。#global-containerMobile menu btncontent-pusher

问题： 当我单击它时，Mobile menu btn它会将side-panel-open类添加到#global-containerdiv 并立即将其删除，因为它Mobile menu btn是 inside content-pusher。（我不能把它放在那个 div 之外）。

起初我认为$('.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 回答