1
所以我試圖製作一個手機菜單，一切都很順利，但是當我點擊它時，它會將我發送到頁面的頂部，而不是下拉菜單。 CDN鏈接正確（使用jQuery alert檢查），所以它是錨標籤故障或jQuery代碼。你們可以檢查嗎？jQuery下拉菜單不起作用它應該如何
$(document).ready(function() {
$('#i-nav').click(function() {
$('ul').toggleClass('show');
});
});html,
body {
min-width: 320px;
min-height: 320px;
margin: 0;
font-family: 'Lato', sans-serif;
background-color: #f1f1f1;
}
.show {
display: block;
}
.testnav ul {
list-style: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin-right: 50px;
}
.testnav ul li {
display: inline;
float: left;
width: auto;
height: 100px;
}
.testnav ul li a {
line-height: 100px;
display: block;
float: left;
padding: 0 20px;
color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
color: white;
border-bottom: 5px solid #b0b0b0;
}
#home:hover {
background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
float: left;
z-index: 101;
line-height: 100px;
text-align: center;
display: none;
}
#logo {
float: left;
margin-left: 50px;
margin-top: 15px;
}
a {
text-decoration: none;
text-transform: uppercase;
}
.floatright-wrapper {
float: right;
}
.testnav {
width: 100%;
height: 100px;
background: white;
margin: auto;
}
@media screen and (max-width: 1024px) {
.floatright-wrapper {
float: none;
}
.testnav ul {
width: 100%;
text-align: center;
margin: 0;
display: none;
}
.testnav ul li {
width: 100%;
}
.testnav ul li a {
width: 100%;
text-align: center;
outline: solid white 1px;
}
#logo {
margin: 10px;
}
#i-nav {
float: right;
margin-right: 40px;
display: block;
font-size: 30px;
color: black;
}
}
@media screen and (max-width: 400px) {
#logo {
width: 50%;
margin-top: 27px;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
<img src="css/images/logo.png" alt="logo" id="logo">
<a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
<nav>
<ul>
<div class="floatright-wrapper">
<li><a href="#" target="_top" id="home">Home</a></li>
<li><a href="#" target="#text-boxes" id="menu2">Menu2</a></li>
<li><a href="#" target="picture-boxes-section" id="menu3">Menu3</a></li>
<li><a href="#" id="menu4">Menu4</a></li>
<li><a href="#" id="menu5">Menu5</a></li>
</div>
</ul>
</nav>
</div>
嘗試添加'切換後返回返回FALSE。它會將您帶到頁面的頂部，因爲您正在點擊一個鏈接。您需要停止鏈接導致的默認操作。 – Matthew
好吧，它不會再發送給我，但它仍然不會切換課程表演。我哪裏做錯了？ –
我已經更新了我對這個問題的想法。請參閱下面的答案。 – Matthew