我是 JavaScript 和 jQuery 的新手，我想我可以尝试使用 a CodeCademy lesson 中的一些代码看看我是否能让它做我想做的事。我不太清楚。
类(class)代码在单击时展开一篇文章，然后在单击另一篇文章时折叠它；它通过 O/N 键提供类似的导航选项。我想知道的是:如何调整 .click() 和 .keypress() 方法，以便它们切换 $(this) 但隐藏其他元素？我猜这里涉及 if/else 语句，但我不确定如何/在哪里放置它们。
这是 CodeCademy 代码。
HTML:
<script src="https://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW business aviation</p>
</div>
<div class="col-xs-6">
<p class="title">Flying the Gulfstream G650</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Flying the Gulfstream G650</h1>
<p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">New retirements cut RAF VC10 fleet to four</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>New retirements cut RAF VC10 fleet to four</h1>
<p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Jul 17</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
<p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Defense</p>
</div>
<div class="col-xs-6">
<p class="title">Freedom Experiences Two More Power Outages</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Freedom Experiences Two More Power Outages</h1>
<p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">FedEx to acquire up to 30 United 757s</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>FedEx to acquire up to 30 United 757s</h1>
<p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
</div>
</body>
CSS:
body {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
margin: 0;
}
.row {
margin: 0;
}
.articles {
margin-top: 30px;
margin-bottom: 30px;
}
.article {
color: #222;
background: rgba(255, 255, 255, .9);
border-spacing: 2px;
border-color: gray;
font-family: arial, sans-serif;
border-bottom: 1px #e5e5e5 solid;
}
.current .item {
background: rgba(206, 220, 206, .9);
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}
.item .source {
margin-left: 20px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 20px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.description h1 {
margin-top: 0px;
font-size: 23px;
JavaScript:
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which === 111) {
$('.description').hide();
$('.current').children('.description').show();
}
else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
}
});
}
$(document).ready(main);
最佳答案
我假设您的意思是您希望点击打开/关闭被点击的文章，并关闭其他文章。我做了一个updated fiddle , 它有 onClick 的相关代码，这应该足以让你弄清楚如何处理按键情况。
相关JS
var current = $(this).hasClass('current');
$('.article').removeClass('current');
$('.description').hide();
if(!current) {
$(this).addClass('current');
$(this).children('.description').show();
}
关于javascript - 我如何使用 jQuery 在多个可折叠元素的列表中 Eloquent 地切换显示/隐藏事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31733956/