我正在学习jquery,需要你的帮助。我想在这里减少代码数量:
navbar
上有三个按钮。 cart
,.account
,.help
。如果我点击cart
,我想隐藏account
和help
的下拉菜单。其他按钮也一样。这是jquery代码,到目前为止我写的!任何人都可以帮我减少代码行数吗?
Jquery代码:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>
答案 0 :(得分:1)
你好你可以像这样减少它
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});