所以,我正在为客户建立一个网站,并遇到了这个奇怪的问题。我正在使用Bootstrap来构建响应能力并使用Wordpress来管理内容。一切都工作得很好,除了我遇到的一个问题,我无法找到解决方案。
我有一个在较小的视口尺寸处折叠的nabber和一个切换开关,在点击时从汉堡包变为“X”。菜单在打开时表现良好,从左侧滑入并覆盖所有内容。但是当我点击关闭按钮时,菜单向左滑动,但随后将收到“show”类并立即再次打开。
我构建了一个Codepen,它使用与Wordpress网站相同的HTML和CSS,但剥离了骨架。它工作正常。所以我认为Wordpress有一些干扰,并在菜单关闭后添加“show”类。
https://codepen.io/j_lyman/pen/EbGPPB/
<header>
<nav class="navbar navbar-light navbar-expand-lg bg-white justify-content-between">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#main-navigation" aria-controls="main-navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="close hidden">X</span>
</button>
<a class="navbar-brand" href="index.html">
<div class="logo-container">
<img src="http://jlr-wp.lymannuthouse.com/wp-content/themes/jlr_twentyeighteen/img/JLR_logo@2x.png" class="logo">
</div>
</a>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav ml-auto">
<li id="menu-home" class="nav-item current-menu-item"><a class="nav-link" href="index.html">Home</a></li>
<li id="menu-program" class="nav-item"><a class="nav-link" href="program.html">Program</a></li>
<li id="menu-portfolio" class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
<li id="menu-newsroom" class="nav-item"><a class="nav-link" href="news.html">Newsroom</a></li>
<li id="menu-blog" class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
</ul>
</div>
</div>
</nav>
</header>
我的意思是:
header {
margin-bottom: 0;
max-height: 81px;
.logo-container {
margin-top: -5px;
padding: 0;
text-align: center;
img {
width: 120px;
}
}
.logo {
//border: 1px solid red;
}
}
/* --------------- MAIN NAVIGATION ---------------*/
.navbar {
padding-top: 0;
padding-bottom: 0;
.navbar-toggler {
border: none;
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#FF6600' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
}
.navbar-collapse {
margin-top: -5px;
position: relative;
z-index: 100;
//background: @white;
}
.navbar-brand {
padding-top: 0;
padding-bottom: 0;
}
.navbar-nav {
margin: 0;
padding: 0;
list-style-type: none;
li {
padding: 0 2rem;
height: 100%;
font-family: 'Proxima Nova', sans-serif;
font-weight: normal;
border-left: 1px solid @ltGray;
a {
padding: 2rem 0;
display: block;
height: 100%;
font-size: 15px;
border-bottom: none;
}
&.current-menu-item {
a {
font-family: 'Proxima Nova Bold', sans-serif;
box-shadow: inset 0 -3px 0 @secondary;
}
}
&:first-child {
border-left: none;
}
}
}
}
@media (max-width: 991px) {
.navbar {
.navbar-collapse {
position: absolute;
top: 70px;
left: 0;
width: 100%;
background: @dkGray;
.nav-item {
border-left: none;
.nav-link {
font-family: 'Proxima Nova Light Thin', sans-serif;
color: @white;
}
&.current-menu-item {
background: lighten(@dkGray, 10%);
.nav-link {
box-shadow: none;
}
}
}
}
.navbar-toggler {
&:focus {
outline: none;
}
.close {
font-weight: bold;
color: @secondary;
}
&.collapsed {
display: inline;
.close {
display: none;
}
}
&:not(.collapsed) {
.close {
display: inline;
}
.navbar-toggler-icon {
display: none;
}
}
}
}
.navbar-collapse.collapsing {
height: auto;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
transition: left 0.3s ease;
left: -100%;
}
.navbar-collapse.show {
left: 0;
-webkit-transition: left 0.3s ease-out;
-o-transition: left 0.3s ease-out;
-moz-transition: left 0.3s ease-out;
transition: left 0.3s ease-out;
}
}
我的WP网站位于此临时位置:
https://jlr-wp.lymannuthouse.com
如果有人在我感谢任何帮助之前已经看到过这种行为,因为我在网上找不到解决这一特定问题的任何内容。