Question

我在这里遇到问题，我想在一个元素中添加和删除一个类，我使用on（）方法来处理body上的click事件。代码适用于第一次单击，但在第一次单击后它将不再处理该事件！以下是代码：

    $('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){

        var navigation = $(this).parents().find('#cshero-header-navigation');

        if(!navigation.hasClass('collapse')){
           navigation.addClass('collapse');
        }else if(navigation.hasClass('collapse')){
           navigation.removeClass('collapse');
        }
    });

这是我在移动设备和平板电脑上显示的菜单图标问题，我想在点击时打开和关闭菜单！我尝试在第一行代码下方发出警报，它只会发出一次警报！任何帮助表示赞赏！

<div id="cshero-header-navigation" class="col-xs-12 col-sm-7 col-md-9 col-lg-9 phones-nav" style="z-index:999999;">
<div class="navigation-main">
    <div class="cshero-navigation-right hidden-xs hidden-sm icon-search-hidden">
        <div class="nav-button-icon">
        </div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="nav-menu menu-main-menu">
                <li>links</li>
                <li>links</li>
                <li>links</li>
                <li>links</li>
                <li>links</li>
            </ul>
        </div>
    </nav>
</div>

<div id="cshero-menu-mobile" class="collapse navbar-collapse">
     <i class="cms-icon-menu pe-7s-menu"></i>
</div>

这是我的HTML代码。在移动视图中，菜单只会打开一次！

Answer 1

问题在于您的代码：您忘记在,和#cshero-menu-mobile之间添加逗号 .cms-icon-menu。以下是推荐的解决方案：

$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){

    var navigation = $(this).parents().find('#cshero-header-navigation');

    if(!navigation.hasClass('collapse')){
       navigation.addClass('collapse');
    }else if(navigation.hasClass('collapse')){
       navigation.removeClass('collapse');
    }
});

您可以简单地使用点击处理程序，而不是使用on，因此$('body').click('#cshero-menu-mobile, .cms-icon-menu', function(){...仍然有效。

从我可以推断的情况来看，你似乎试图模仿Bootstrap's accordion。我建议你改用它。

Answer 2

试试这个：

$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
    $(this).parents().find('#cshero-header-navigation').toggleClass("collapse")
});

Answer 3

对每个感兴趣的人，我解决了问题，只是改变了第一行

$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){

到

$('body').click(function(){

这个接缝将click事件直接绑定到body上，这是一个简单的解决方案！

Jquery方法只触发一次

3 个答案: