我一直在阅读此问题的其他可能重复内容,但我仍然找不到完成该问题所需的解决方案。因此,我下载了一个CSS文件,其中包含所有宽度的Hamburger,但是它们的类名与Bootstrap的Nav类冲突,因此我更改了SCSS文件和CSS以使其起作用,然后还更改了.js文件中的名称以避免错误。
但是,错误似乎仍然存在,并且不会消失。这次,菜单列表隐藏在汉堡包中,但是该汉堡包不起作用。这是所有受影响的代码。
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>
如果有人可以解决这个问题,那就太好了!谢谢!
答案 0 :(得分:0)
navi: document.querySelector('.navi') will be `navi: document.querySelector('.navi')` as it is a class
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('.navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>