Question

我正在使用儿童主题在Wordpress中开发一个网站。问题是，当我在浏览器中打开一个新选项卡或将其关闭并再次打开时，当我在响应模式(<1025 px)中工作时，标题中的菜单之一显示为重复，也就是说，它出现在下拉菜单中响应菜单的下拉菜单将垂直和水平形状对齐。很奇怪，因为当我重新加载页面（F5）时，这种重复性消失了，并且垂直菜单仅显示出来。当我单击另一个链接转到子页面时，也消除了这种重复性。

此外，我了解以下与上述内容有关，当Web处于响应模式并更改为正常大小（> 1024 px）时，如果我返回到响应模式，响应菜单将显示在即使已加载也为空白（因为我在Chrome devtool中观看了它）。关联的css代码指示=>“ display：none”，但是当我重新加载页面时，显示的css代码为“ display：block”，但是它不是来自主题样式表；它来自主题样式表。它显示为“用户代理stylesheet”。为什么重新加载页面时显示值会更改？

此外，通过所有这一项，我对浏览器Chrome和Firefox进行了测试，并删除了缓存和cookie，问题还是一样。

我希望在浏览器中打开新标签页或从响应大小切换到普通模式(>1024px)时，响应菜单不会出现空白或重复。

下面您可以在我的header.php中看到代码：

<nav id="MenuNav" class="navbar" style="display: inherit;">
<div id="menu" class="main-navigation ">
<ul id="menu-primary-menu" class="nav navbar-nav">
<li id="menu-item-739" class="menu-item menu-item-type-post_type             
menu-item-object-page menu-item-739">
<a href="http://localhost/Cover/blog/">Blog</a></li>
<li id="menu-item-740" class="menu-item menu-item-type-post_type             
menu-item-object-page menu-item-740">
<a href="http://localhost/Cover/events/">Events</a></li>
<li id="menu-item-741" class="menu-item menu-item-type-post_type             
menu-item-object-page menu-item-home current-menu-item page_item         
page-item-39 current_page_item menu-item-741">
<a href="http://localhost/Cover/">Home</a></li>
</ul>
</div>
<!--/.navbar-collapse -->
</nav>

css样式记为标签：

<nav id="MenuNav" class="navbar" style="display: inherit;">

是以下内容：

element.style {display：Inherit;}。该css属性来自文件footer.php和以下代码行：

foother.php：

<?php wp_footer(); ?>
<script type="text/javascript">
jQuery(function(){
function msmenu(){
var wi = jQuery(window).width();
var nb = jQuery(".cloned").length;
if(wi <= '1024') {
if(nb < 1) {
jQuery("#MenuNav").clone().insertBefore("#page").addClass("cloned");
jQuery("#MenuNav").find('.navbar-nav').removeClass('navbar-nav');
jQuery("html").addClass('Mobinav');
}
}else{
if(jQuery('html').hasClass('Mobinav')){
jQuery('#MenuNav').remove();
jQuery('html').removeClass('navOpen').removeClass('Mobinav');
}
}
}
msmenu();
jQuery(window).resize(function() { msmenu(); });

jQuery('.navbar-toggle').click(function(){
jQuery('#MenuNav').toggleClass("open");
jQuery('html').toggleClass("navOpen");
});

jQuery(".navbar-toggle").toggle( function() {
jQuery('#MenuNav').css({ 'display' : 'block'});
}, function () {
jQuery('#MenuNav').css({ 'display' : 'inherit'});
});
jQuery('#search-toggle').click(function(){
jQuery('.bottom-header .searchbar').slideToggle(180);
});
});
new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );

如您所见，上面显示的css属性[element.style {display：Inherit ;;]]来自footer.php中的行：jQuery（'＃MenuNav'）。css（{'display'：'inherit' }）;我将这一行修改为“ display：inherit”，因为在footer.php中首先是“ display：none”。我不知道为什么当我更改此css属性时，所采用的样式在Chrome DevTool中显示为[element.style {display：Inherit ;;}]，而不显示为来自footer.php文件。另外，我还在footer.php中将css属性设置为显示：没有，响应式菜单未显示为我的网站（空白）。出于这个原因，我必须对其进行更改，但是当我执行该操作时，菜单就会如我上面提到的那样重复。

亲切的问候。

响应式菜单加载错误（WordPress网站）

0 个答案: