6
私はちょうどJ-Queryを学び始めました。私はあなたがモバイルナビを開くボタンをクリックすると私のウェブページに簡単なクリックイベントを実装しようとしています。ボタンがモバイルメニューを表示しない
このボタンはヘッダーを選択すると機能します。たとえばヘッダーは非表示になりますが、モバイルナビは表示されませんか？
p.s私は、私が著作権で保護されたメディアを使用していることを知っているので、学習目的のためだけにDICEホームページをコピーしています。
私はそれがとてもJ-queryカントtoogleは/それを示すことがImは私のCSSにモバイル-NAVを隠すをどうすることができると思い。
@media screen and (max-width: 1024px) {
nav{
justify-content: space-around;
}
.bars{
display:block;
width: 50px;
height: 100px;
cursor: pointer;
}
ul{
display: none !important;
}
.mobile-nav{
display: none;
position:absolute;
z-index: 3;
left:-110px;
top:70px;
width: 100%;
height: 100%;
opacity: 0.8;
background-color:black;
}
.mobile-nav li{
height: 50px;
}
.mobile-nav a{
font-size: 2rem;
font-weight: 700;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dice</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$('.bars').on('click',function(){
$('.mobile-nav').show();
});
}); //End of code?//
</script>
</head>
<body>
<header>
<nav>
<img src="dice-logotype-black.png">
<button class="bars">
<ul class="mobile-nav">
<li><a href="#">ABOUT</a></li>
<li><a href="#">GAMES</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">STORE</a></li>
</ul>
</button>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GAMES</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">STORE</a></li>
</ul></nav>
</header>
<div class="global-container">
<div class="video"><video src="dicemovie3-1.mp4" autoplay loop></video>
<div class="text"><h1>We share the passion to create something extraordinary.</h1>
<button>DISCOVER OUR CULTURE</button><button id="button-2">READ ABOUT OUR GAMES</button>
</div>
</div>
</div>
<div class="square-images">
<div class="square-1"></div>
<div class="square-2"></div>
<div class="square-3"></div>
</div>
<div class="about-dice-wrapper"><div><h2>MORE THAN COMPUTER SCREENS</h2>
<p>DICE is the award-winning developer of the Battlefield franchise and games like Mirror’s Edge.
We are situated in the world’s most picturesque cities, Stockholm,
Sweden and in the vibrant city of Los Angeles, USA.</p>
<button>About Dice</button></div></div>
<div class="tweet-wrapper"><div>
<img src="tweet.jpg-thumb">
<p>Meet DICE today! Head to Stockholm's Nationalmuseum at 18:00 & learn about character design: https://t.co/WGUbkFNjay https://t.co/0SrHr38HiH<br> @EA_DICE</p>
</div>
</div>
</body>
</html>うまくいけば、誰かが私にこの問題いくつかの洞察を与えることができます。
このコンテキストでは、show/hideを設定しないようにしてください。 toggleClassを使用し、CSSで表示または非表示にする –
j-queryを使用してCSSを表示：ブロックに変更しようとしましたが、動作しませんでした。私はJ-クエリーで非常に緑色なので、toggleClassを調べなければなりません:) –