Question

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

当您点击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');
      });

    });

感谢。

Answer 1

问题是你绑定的过渡效果的处理程序会在高度变化时触发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/

注意：为什么第一次点击有效是因为您只在第一次点击时绑定了该转换处理程序。

Answer 2

你可以尝试

＆＃13;

(function ($) {
    $(document).ready(function () {
        $('.icon-mobile-menu').on('click', function () {
            $(this).toggleClass('menu-open');
            $('.navigation').toggleClass('nav-slide');
        });
    });
})(jQuery);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

第二次单击后jQuery单击事件不正确

2 个答案: