DEMO : 我在RWD中使用了一组函数，
我面临的问题是，每次我必须刷新页面才能运行这些功能，有没有办法刷新功能。 我使用bootstrap，require.js
有人可以对此有所了解，因为自定义组件，我们刷新的功能。
示例代码：
$(function () {
function toggleNavbarMethod() {
if ($(window).width() > 1024) {
$('nav .score-megamenu-dropdown').on('mouseover', function () {
$('.dropdown-toggle', this).trigger('click');
}).on('mouseout', function () {
$('.dropdown-toggle', this).trigger('click').blur();
});
}
else {
$('nav .score-megamenu-dropdown').off('mouseover').off('mouseout');
}
}
toggleNavbarMethod();
$(window).resize(toggleNavbarMethod);
var PGBRAUN = PGBRAUN || {};
PGBRAUN = {
globalVars: {
onPageLoad: '',
MD_min_width: 992,
XS_max_width: 767,
SM_min_width: 768,
SM_max_width: 991
},
domReady: function () {
$('.mob-header').parent('.container').hide(); // hiding sign in and signup container in dt
},
preventLinks: function () {
/* anything needed to run at DOM load (not page load) would be declared here */
var stopFromLinking = ".score-header ul.header-category li:first-child, .score-footer ul.footer-social-share li:first-child, a.menu-links";
$(document).on('click', stopFromLinking, function (e) {
e.preventdefault();
})
},
megaMenuSP: function () {
if ($(window).width() < 991) {
/* Changing Menu slide-collapse attribute on ready */
$('.score-hamburger.navbar-toggle').attr('data-toggle', 'slide-collapse');
/* Adding of new div for slide container starts*/
$('.score-header').after($('<div id="navbar-height-col"></div>'));
$(".mob-header, .navbar-collapse").wrapAll("<div id='slidemenu'></div>");
//$('html .mob-header').prependTo('.navbar-collapse');
var slidewidth = '80%';
var navbarneg = '-' + slidewidth;
/* Adding of new div for slide container ends*/
$('#navbar-height-col').css({
"width": slidewidth,
"right": navbarneg
});
$('#slidemenu').css({
"width": '86.7%',
"right": navbarneg
});
$('.navbar-toggle').addClass('collapsed');
$('.page-wrapper').attr('id', 'page-content');
navVisible = 0;
/* Main Menu Button Hamburger starts */
$(document).on('click', '.navbar-toggle', function (e) {
//debugger;
/* Show Close Icon starts */
$(this).toggleClass('collapsed');
$(this).toggleClass('collapsed').attr('aria-expanded', 'true');
/* Show Close Icon ends */
/* Hiding Images from Ul dd start */
$('ul.dropdown-menu').find('.header-mega-menu-view-all-button, .header-mega-menu-img').hide();
/* Hiding Images from Ul dd ends */
/* Adding Class for Mobile View starts -> check can this be added on load */
$('.score-megamenu-dropdown').find('.menu-links').addClass('dropdown-toggle toggle-caret button-caret').attr('data-toggle', 'dropdown');
/* Adding Class for Mobile View ends */
/* Finding Mob Sign in Link and Prepending before Navigation starts */
// $('html .mob-header').prependTo('.collapse.navbar-collapse');
/* Finding Mob Sign in Link and Prepending before Navigation ends */
/* Show right side Menu starts */
$('.mob-header').toggle();
$('.navbar-collapse').toggle('collapse');
//$('.mob-header').show();
var selected = $(this).hasClass('slide-active');
$('#slidemenu').stop().animate({
//right: selected ? navbarneg : '0px'
right: selected ? navbarneg : '-15px'
});
$('#navbar-height-col, #page-content').stop().animate({
right: selected ? navbarneg : '0px'
});
$('#page-content').stop().animate({
right: selected ? '0px' : slidewidth
});
$('.navbar-header').stop().animate({
right: selected ? '0px' : slidewidth
});
$('.score-footer').stop().animate({
right: selected ? '0px' : slidewidth
});
$('.score-footer .container').stop().animate({
right: selected ? '0px' : slidewidth
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active', 'fast');
//$('body, #page-content, .navbar, .navbar-header, .score-footer, .score-footer .container').toggleClass('slide-active');
$('body, #page-content, .navbar, .navbar-header, .score-footer, .score-footer').toggleClass('slide-active');
//$('.score-footer .container').hide();
//$('.slide-menu-content').toggle();
//$("body").append('<div class="back-drop" style="position: fixed;height: 100%;width: 100%;top: 0;right:83%;z-index: 990;"><\/div>');
navVisible == 0 ? (navVisible = 1,
$("body").css("cursor", "pointer"),
$("body").append('<div class="back-drop" style="position: fixed;height: 100%;width: 100%;top: 0;right:83%;z-index: 990;"><\/div>')) : (navVisible = 0,
$("body").css("cursor", "inherit"),
$(".back-drop").remove())
//: (navVisible = 0, $("body").css("cursor", "inherit"), $(".back-drop").remove()
/* Show right side Menu ends */
});
$(document).on('click', '.back-drop, #navbar-height-col', function () {
$('.navbar-toggle.slide-active').trigger('click');
})
/* Main Menu Button Hamburger ends */
/* Sub Menu starts */
$('.header-mega-menu a').click(function (e) {
if ($(this).hasClass('menu-links')) {
if ($(this).hasClass('submenu-menu')) {
$(this).removeClass('submenu-menu');
$(this).next().next('.dropdown-menu').hide();
$(this).parents('.header-mega-menu').find('li').removeClass('open');
} else {
$('a.dropdown-toggle').removeClass('submenu-menu');
$(this).parents('.header-mega-menu').find('li').removeClass('open');
$(this).parent().addClass('open');
$(this).addClass('submenu-menu');
$('.dropdown-menu').hide();
$(this).next().next('.dropdown-menu').show();
}
}
if ($(this).hasClass('sub-menu-first-child')) {
if ($(this).hasClass('submenu-menu')) {
$(this).removeClass('submenu-menu');
//$(this).parent().next('.dropdown-menu').hide();
$(this).next('.dropdown-menu').hide();
} else {
$('a.sub-menu-first-child').removeClass('submenu-menu');
$(this).addClass('submenu-menu');
$('.header-mega-menu-content').find('.dropdown-menu').hide();
//$(this).parent().next('.dropdown-menu').show();
$(this).next('.dropdown-menu').show();
}
}
e.stopPropagation();
e.preventDefault();
})
/* Sub Menu ends */
}
var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header, .score-footer';
$(window).on("resize", function () {
if ($(window).width() < 991 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
},
promoBlockMatchHeight() {
$(".promo-match-height").each(function () {
var $promoleft = $(this).find(".score-left .caption");
var $promoRight = $(this).find(".score-right .caption");
$promoleft.height('');
$promoRight.height('');
var promoLeftHeight = $promoleft.innerHeight();
var promoRightHeight = $promoRight.innerHeight();
var heightVal = (promoLeftHeight == promoRightHeight) ? promoLeftHeight : promoRightHeight;
$promoleft.css({
"height": heightVal
});
$promoRight.css({
"height": heightVal
});
});
},
accordianList: function () {
$(".cate-navigator").find(".cat-nav-list-title").click(function (e) {
e.preventDefault();
var $content = $(this).nextAll(".cat-nav-list");
$(".cate-navigator").find(".cat-nav-list").not($content).hide();
//$(this).nextAll(".cat-nav-list").toggle();
$(this).nextAll(".cat-nav-list").toggleClass('display-block');
});
},
init: function () {
PGBRAUN.domReady();
PGBRAUN.preventLinks();
PGBRAUN.megaMenuSP();
PGBRAUN.promoBlockMatchHeight();
PGBRAUN.accordianList();
}/*,
onWindowResizeRefresh: function () {
PGBRAUN.init();
}*/
}
return PGBRAUN.init();
});
答案 0 :(得分：0)
正如我在评论中已经提到的，您应该在将鼠标悬停事件添加到导航.score-megamenu-dropdown＆＃39;之前使用unbind()功能。元素，所以它不会在调整窗口大小时绑定相同的事件X次。
function toggleNavbarMethod() {
if ($(window).width() > 1024) {
$('nav .score-megamenu-dropdown').unbind('mouseover'); // unbind the event
$('nav .score-megamenu-dropdown').on('mouseover', function () {
$('.dropdown-toggle', this).trigger('click');
}).on('mouseout', function () {
$('.dropdown-toggle', this).trigger('click').blur();
});
}
else {
$('nav .score-megamenu-dropdown').off('mouseover').off('mouseout');
}
}