我刚刚开始学习J-Query,我正在尝试在我的网页中实现一个简单的点击事件,当你点击一个按钮时它将打开mobile-nav.
当我选择标题时,此按钮有效,例如它会隐藏标题,但不会显示mobile-nav？
ps我正在复制DICE主页仅用于学习目的,因为我知道我正在使用受版权保护的媒体;).
我认为这可能与我隐藏移动导航在我CSS所以J-query无法toogle /显示它.
@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>希望有人可以给我一些关于这个问题的见解.
请尝试以下操作：
$(".bars").click(function() {
$(".mobile-nav").show();
});.mobile-nav {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="bars">Click me</button>
<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>虽然使用toggleClass会更有用。
$(".bars").click(function(event) {
$(".mobile-nav").toggleClass('opened');
});.mobile-nav {
display: none;
}
.opened {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="bars">Click to toggle</button>
<ul class="mobile-nav">
<li>Blabla</li>
<li>Blabla</li>
<li>Blabla</li>
</ul>