Question

我有一个菜单系统，我需要重新计算调整大小的尺寸。它在加载时工作正常，但在调整大小时会多次触发事件。有没有办法解决这个问题，因此每次调整大小时，调整大小事件都不会遍历事件？

function sizing() {



            var currentHeight = $('.level_one li').outerHeight();
            var currentHeightIMG = $('.level_one li img').outerHeight();
            var math = currentHeight - currentHeightIMG;

            console.log(' C Height '+currentHeight);
            console.log(' IMG Height '+currentHeightIMG);
            console.log(' Math '+math);



            //
            //  Set Level Two Height
            //
            $('.level_two li').css({'height': currentHeight - math + 'px'});   


            //
            //  Show Menu   
            //


            $("#super_nav_action").click( function(event){
                event.preventDefault();
                if ($(this).hasClass("isDown") ) {
                    $(".heyo").animate({'height':'0px'}, 200, "linear");            

                    $('.level_one').animate({'margin-top': '0px'});



                    $('.level_one li').siblings().removeClass("selected");
                    $('.heyo').css({ 'border-bottom': '1px solid #fff' });
                    $('.level_one').removeClass("isAlsoDown");

                    $(this).removeClass("isDown");

                } else {

                    $(".heyo").animate({'height':  + currentHeight + 2 + 'px'}, 200, "linear"); 
                    $(this).addClass("isDown");


                }
                return false;
            });





            //  
            //  Show Level Two
            //
            $( ".level_one li" ).click(function() {


            var active_tab_selector = $(this).attr('data-menu');
            var actived_nav = $('.level_two');


            if ($('.level_one').hasClass("isAlsoDown") ) {

                    actived_nav.addClass('hide');
                    actived_nav.hide().animate({'opacity':  1}, 150);  


                     $('#' + active_tab_selector).removeClass('hide');
                     $('#' + active_tab_selector).show().animate({'opacity':  1}, 150);  





                } else {

                $('.level_one').addClass("isAlsoDown");
                actived_nav.addClass('hide');
                actived_nav.hide().animate({'opacity':  0}, 1);  
                $('#' + active_tab_selector).removeClass('hide');
                $('#' + active_tab_selector).show().animate({'opacity':  1}, 1);  

                }



            $('.heyo').css({ 'border-bottom': '1px solid #bababa' }); 






            $('.level_one').animate({
            position: 'relative',
            'margin-top': '-' + currentHeightIMG + 'px'
                 }, {
                duration: 300,
                complete: function() { }
                });

                $(this).siblings().removeClass("selected");
                $(this).addClass("selected",  10000, "easeOutBounce");

               });



}


  $(window).load(sizing);
  $(window).resize(sizing);

Answer 1

将点击事件功能移到sizing()功能之外。您还需要将var定义移到该函数之外。

工作演示：http://jsfiddle.net/YEa3z/2/

Answer 2

我不知道我是否理解你的问题以及这是否对你有所帮助但是如果您在调整大小事件后不想要列表打开并关闭几次，则必须将调整大小与单击列表元素分开在此Fiddle中，此问题已得到纠正。

  function sizing() {
        var currentHeight = $('.level_one li').outerHeight();
        var currentHeightIMG = $('.level_one li img').outerHeight();
        var math = currentHeight - currentHeightIMG;
        $('.level_two li').css({'height': currentHeight - math + 'px' });
        $('.heyo').css({'border-bottom': '1px solid #bababa'});
        $('.level_one').animate({position: 'relative','margin-top': '-' + currentHeightIMG + 'px'
        }, {duration: 300,complete: function () {}});
        $(this).siblings().removeClass("selected");
        $(this).addClass("selected", 10000, "easeOutBounce");
    }
    $(window).on('resize',function(){
    sizing()
    })

和文档就绪事件所有其他代码

$(coument).ready(function(){
  //click elements.......
})

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

调整大小会导致jquery动画循环

2 个答案: