1
モバイルメニューを作成しようとしましたが、すべてがうまくいっていましたが、クリックすると、メニューをドロップする代わりにページの一番上に送られます。 CDNは適切にリンクされています（jQueryアラートでチェックされている）ので、アンカータグのfaultまたは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