j查询点击事件在第二次点击后不正确

jQuery click event not correct after second click

本文关键字：不正确 第二次 事件 查询      更新时间：2023-09-26

我整个晚上都在玩这个，但似乎无法弄清楚我的代码出了什么问题。

http://jsfiddle.net/486egfut/

当您单击menu按钮时，将显示导航，并使用CSS进行动画处理。当您再次单击它时，它会消失。也是CSS动画。

但是，如果第三次单击它，则会添加类collapsed，并立即再次删除。

这样做的正确方法是什么。使用 CSS 对元素的高度进行动画处理，并使用 jQuery 在动画后切换display？

我也尝试了多个.on()事件，但没有成功（见下文）

    $('body').on('click', '.icon-mobile-menu', function(e){
      e.preventDefault();
      $(this).addClass('menu-open');
      $nav.addClass('collapsed').height(312);
    }).on('click', '.menu-open', function(e){
      e.preventDefault();
      $(this).removeClass('menu-open');
      $nav.css('height', '').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
        $nav.removeClass('collapsed');
      });
    });

谢谢。

问题是，当高度发生变化时，包括尝试折叠对话框时，您绑定的过渡效果的处理程序会触发 EVERYTIME。

这是一个有效的修复程序，尽管它有点脏：

$(document).ready(function () {
    var $nav = $('.navigation'),
        $header = $('.header');
    $('.icon-mobile-menu').on('click', function () {
        $(this).toggleClass('menu-open');
        if ($nav.hasClass('collapsed')) {
            $nav.css('height', '').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
                // Fix goes here
                if ($nav.height() == 0){
                  $(this).removeClass('collapsed');
                }
            });
        } else {
            $nav.addClass('collapsed').height(75); // fixed height is for demo purposes only.
        }
    });
});

http://jsfiddle.net/486egfut/12/

注意：首次点击之所以有效，是因为您仅在首次点击时绑定了该转换处理程序。

你可以试试 

(function ($) {
    $(document).ready(function () {
        $('.icon-mobile-menu').on('click', function () {
            $(this).toggleClass('menu-open');
            $('.navigation').toggleClass('nav-slide');
        });
    });
})(jQuery);
.icon-mobile-menu {
    background: red;
    padding: 5px 10px;
    cursor: pointer;
}
.menu-open {
    background: blue;
    color: white;
}
.navigation {
    margin-top: 4px;
    background: green;
    padding: 5px 10px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    -moz-transition:all 0.35s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: all 0.35s cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transition: all 0.35s cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 0.35s cubic-bezier(0.7, 0, 0.3, 1);
}
.nav-slide{
    height: 75px;
    opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header"> 
    <span class="icon-mobile-menu">menu</span>
</header>
<div class="navigation">
    <ul>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

相关文章：