Question

在我的网站上，我让Wordpress创建菜单。我有一些jQuery，可以对该菜单进行更改以使其成为响应菜单。这样很好。我的问题是，当您加载页面时，您会看到普通菜单，然后将其更改为响应菜单。这使我相信jQuery在页面渲染之后而不是之前运行。我已经尝试了所有可以在Google上找到的解决问题的方法，但是由于我不知道确切的问题，因此我甚至不确定我是否尝试了正确的解决方法。

我已经在页脚和页眉中加载了Javascript文件。我还更改了Javascript随附的CSS的加载顺序。我什至尝试将一个类的可见性设置为none，然后添加到body标签中，然后在页脚结尾处，我有一些Javascript从body标签中删除了该类，以便您看到页面为止完全呈现的是白页，但这也无济于事。即使从body标签中删除了该类，您仍然可以看到菜单更改。

如果您希望自己完成此操作，请转到此链接。 https://www.cheekypunter.com

否则，这是菜单所使用的代码。

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

function responsiveMobileMenu() {
  jQuery('.rmm').each(function() {



    jQuery(this).children('ul').addClass('rmm-main-list');  // mark main menu list


    var $style = jQuery(this).attr('data-menu-style');  // get menu style
    if ( typeof $style == 'undefined' ||  $style == false )
    {
      jQuery(this).addClass('graphite'); // set graphite style if style is not defined
    }
    else {
      jQuery(this).addClass($style);
    }


    /*   width of menu list (non-toggled) */

    var $width = 0;
    jQuery(this).find('ul li').each(function() {
      $width += jQuery(this).outerWidth();
    });

    // if modern browser

    if (jQuery.support.leadingWhitespace) {
      jQuery(this).css('max-width' , '1024px');
    }
    //
    else {
      jQuery(this).css('width' , '1024px');
    }

  });
}
function getMobileMenu() {

  /*   build toggled dropdown menu list */

  jQuery('.rmm').each(function() {
    var menutitle = jQuery(this).attr("data-menu-title");
    if ( menutitle == "" ) {
      menutitle = "Menu";
    }
    else if ( menutitle == undefined ) {
      menutitle = "Menu";
    }
    var $menulist = jQuery(this).children('.rmm-main-list').html();
    var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
    jQuery(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

  });
}

function adaptMenu() {

  /*   toggle menu on resize */

  jQuery('.rmm').each(function() {
    var $width = jQuery(this).css('max-width');
    $width = $width.replace('px', '');
    if ( jQuery(this).parent().width() < 1020 ) {
      jQuery(this).children('.rmm-main-list').hide(0);
      jQuery(this).children('.rmm-toggled').show(0);
    }
    else {
      jQuery(this).children('.rmm-main-list').show(0);
      jQuery(this).children('.rmm-toggled').hide(0);
    }
  });

}

jQuery(function() {

  responsiveMobileMenu();
  getMobileMenu();
  adaptMenu();

  /* slide down mobile menu on click */

  jQuery('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
    if ( jQuery(this).is(".rmm-closed")) {
      jQuery(this).find('ul').stop().show(300);
      jQuery(this).removeClass("rmm-closed");
    }
    else {
      jQuery(this).find('ul').stop().hide(300);
      jQuery(this).addClass("rmm-closed");
    }

  });
});
/*   hide mobile menu on resize */
jQuery(window).resize(function() {
  adaptMenu();
});

#header-navigation { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16px; clear: both; background: #b40610; box-shadow: 0px 2px 0px #b40610;}
.header-nav-menu { display: table; list-style: none; max-width: 1024px; width: 100% !important; margin: 0px auto; padding: 0px;}
.header-nav-menu li {  display: table-cell; text-align: center;}
.header-nav-menu li a { display: block; color: #ffffff;    text-decoration: none; white-space: nowrap; padding: 12px 0px;}
.header-nav-menu li a:hover { color: #00005c; background: #e8eaf1; }

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
    text-transform: uppercase;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	width:auto;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/* */


.rmm .rmm-main-list li {
	display:inline;
	padding:0px;
	margin:0px !important;
}
.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
	display:inline-block;
	padding:15px 25px;
	margin:0px -3px 0px -3px;
}
.rmm.graphite .rmm-toggled {
	width:95%;
	min-height:36px;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}

.rmm.graphite .rmm-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background:white;
	width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
	display:block;
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #ffffff;
}
.rmm.graphite .rmm-toggled ul li a:hover {
	text-decoration: underline;
}
.rmm.graphite .rmm-toggled ul li a:active {
	background-color:#444444;
	border-bottom:1px solid #444444;
	border-top:1px solid #444444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="header-navigation">
  <div class="rmm">
    <ul id="menu-primary" class="header-nav-menu">
      <li id="menu-item-412" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-412"><a href="https://www.cheekypunter.com/">Home</a></li>
      <li id="menu-item-434" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-434"><a href="https://www.cheekypunter.com/about/">About</a></li>
      <li id="menu-item-436" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-436"><a href="/tips/">Tips</a></li>
      <li id="menu-item-433" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-433"><a href="https://www.cheekypunter.com/free-bets/">Offers</a></li>
      <li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-435"><a href="https://www.cheekypunter.com/reviews/">Reviews</a></li>
      <li id="menu-item-4554" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4554"><a href="/stats/">Stats</a></li>
      <li id="menu-item-893" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-893"><a href="/mobile/">Apps</a></li>
      <li id="menu-item-894" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-894"><a href="/deposit/">Banking</a></li>
    </ul>
  </div>
</nav><!-- #site-navigation -->

Answer 1

在响应式移动菜单代码运行之前页面已完成加载的原因是，用于更改菜单的代码包含在

中

jQuery(function() {
//...
});

，等效于$(document).ready()，即告诉浏览器在运行代码之前要等到文档完成加载。

您可以尝试采用响应式移动菜单脚本，而不是将其插入到它们自己的脚本标签中，该脚本标签将在紧接其应用菜单下方的HTML中插入，并移除jQuery(function() {...});包装器。有关我的意思的工作示例，请参见下面的代码段：

#header-navigation { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16px; clear: both; background: #b40610; box-shadow: 0px 2px 0px #b40610;}
.header-nav-menu { display: table; list-style: none; max-width: 1024px; width: 100% !important; margin: 0px auto; padding: 0px;}
.header-nav-menu li {  display: table-cell; text-align: center;}
.header-nav-menu li a { display: block; color: #ffffff;    text-decoration: none; white-space: nowrap; padding: 12px 0px;}
.header-nav-menu li a:hover { color: #00005c; background: #e8eaf1; }

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
    text-transform: uppercase;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	width:auto;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/* */


.rmm .rmm-main-list li {
	display:inline;
	padding:0px;
	margin:0px !important;
}
.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
	display:inline-block;
	padding:15px 25px;
	margin:0px -3px 0px -3px;
}
.rmm.graphite .rmm-toggled {
	width:95%;
	min-height:36px;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}

.rmm.graphite .rmm-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background:white;
	width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
	display:block;
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #ffffff;
}
.rmm.graphite .rmm-toggled ul li a:hover {
	text-decoration: underline;
}
.rmm.graphite .rmm-toggled ul li a:active {
	background-color:#444444;
	border-bottom:1px solid #444444;
	border-top:1px solid #444444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="header-navigation">
  <div class="rmm">
    <ul id="menu-primary" class="header-nav-menu">
      <li id="menu-item-412" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-412"><a href="https://www.cheekypunter.com/">Home</a></li>
      <li id="menu-item-434" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-434"><a href="https://www.cheekypunter.com/about/">About</a></li>
      <li id="menu-item-436" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-436"><a href="/tips/">Tips</a></li>
      <li id="menu-item-433" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-433"><a href="https://www.cheekypunter.com/free-bets/">Offers</a></li>
      <li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-435"><a href="https://www.cheekypunter.com/reviews/">Reviews</a></li>
      <li id="menu-item-4554" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4554"><a href="/stats/">Stats</a></li>
      <li id="menu-item-893" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-893"><a href="/mobile/">Apps</a></li>
      <li id="menu-item-894" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-894"><a href="/deposit/">Banking</a></li>
    </ul>
  </div>
</nav><!-- #site-navigation -->
<script>/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

function responsiveMobileMenu() {
  jQuery('.rmm').each(function() {



    jQuery(this).children('ul').addClass('rmm-main-list');  // mark main menu list


    var $style = jQuery(this).attr('data-menu-style');  // get menu style
    if ( typeof $style == 'undefined' ||  $style == false )
    {
      jQuery(this).addClass('graphite'); // set graphite style if style is not defined
    }
    else {
      jQuery(this).addClass($style);
    }


    /*   width of menu list (non-toggled) */

    var $width = 0;
    jQuery(this).find('ul li').each(function() {
      $width += jQuery(this).outerWidth();
    });

    // if modern browser

    if (jQuery.support.leadingWhitespace) {
      jQuery(this).css('max-width' , '1024px');
    }
    //
    else {
      jQuery(this).css('width' , '1024px');
    }

  });
}
function getMobileMenu() {

  /*   build toggled dropdown menu list */

  jQuery('.rmm').each(function() {
    var menutitle = jQuery(this).attr("data-menu-title");
    if ( menutitle == "" ) {
      menutitle = "Menu";
    }
    else if ( menutitle == undefined ) {
      menutitle = "Menu";
    }
    var $menulist = jQuery(this).children('.rmm-main-list').html();
    var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
    jQuery(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

  });
}

function adaptMenu() {

  /*   toggle menu on resize */

  jQuery('.rmm').each(function() {
    var $width = jQuery(this).css('max-width');
    $width = $width.replace('px', '');
    if ( jQuery(this).parent().width() < 1020 ) {
      jQuery(this).children('.rmm-main-list').hide(0);
      jQuery(this).children('.rmm-toggled').show(0);
    }
    else {
      jQuery(this).children('.rmm-main-list').show(0);
      jQuery(this).children('.rmm-toggled').hide(0);
    }
  });

}

  responsiveMobileMenu();
  getMobileMenu();
  adaptMenu();

  /* slide down mobile menu on click */

  jQuery('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
    if ( jQuery(this).is(".rmm-closed")) {
      jQuery(this).find('ul').stop().show(300);
      jQuery(this).removeClass("rmm-closed");
    }
    else {
      jQuery(this).find('ul').stop().hide(300);
      jQuery(this).addClass("rmm-closed");
    }

  });

/*   hide mobile menu on resize */
jQuery(window).resize(function() {
  adaptMenu();
});</script>

请注意，您绝对必须等到至少导航加载到DOM中之后，才能使用jQuery（或任何JavaScript）进行操作-您无法处理不存在的内容-因此，请在之后立即运行脚本您可以尽快运行DOM加载的那一部分。

IMO可以避免这些问题的更清洁的解决方案是，仅具有一个仅通过CSS和媒体查询进行响应的响应菜单，而不是使用jQuery进行响应的菜单；完全可以在没有jQuery的情况下制作响应式移动菜单，并且可以避免所有这些问题。

Answer 2

我的问题是，当您加载页面时，您会看到普通菜单，然后将其更改为响应菜单。这使我相信jQuery在页面渲染之后而不是之前运行。

是的，jQuery运行在“之后”。需要这样做的原因是，在3个功能中，您必须使其成为移动菜单，然后从呈现的元素中检索一些width值...然后进行一些比较以显示/隐藏某些元素...

问题是用户可以在瞬间看到它。

作为缓解措施而不是解决方案，您可以尝试使用标题的opacity ...也许您会喜欢这种效果！

在您的CSS中，添加：

#header{
  opacity:0;
}

在这三个功能之后，添加：

setTimeout(()=>{
  $("#header").animate({"opacity":1},800);
},800);

这将等待800毫秒，然后在另外800毫秒内开始播放类似动画的效果。
那应该足以在标题自动调整时“隐藏”标题。

免责声明：我不确定这是否可行。但我会尝试。 ;）

jQuery在页面呈现后更改元素

2 个答案: