如何使用jQuery雄辩地切换多个可折叠项目列表中的show / hide事件？

Question

I'm new to JavaScript and jQuery and thought I could play around with some code from a CodeCademy lesson to see if I could get it to do what I want. 我是JavaScript和jQuery的新手，并认为我可以使用CodeCademy课程中的一些代码来了解我是否可以使它完成我想做的事情。 I can't quite get it right. 我不太正确。

The lesson code expands the an article when clicked, then collapses it if another article is clicked; 课程代码在单击时会展开一篇文章，然后在单击另一篇文章时将其折叠； it gives similar options for navigation via the O/N keys. 它通过O / N键提供了类似的导航选项。 What I want to know is: how do I adjust both the .click() and .keypress() methods so that they toggle $(this) but hide the other items? 我想知道的是：我怎么同时调整.click()和.keypress()方法，使他们切换$(this) ，但隐藏的其他项目？ I'm guessing there are if/else statement involved here but I'm not sure how/where to put them. 我猜这里涉及if / else语句，但是我不确定如何/在哪里放置它们。

Here's the CodeCademy code. 这是CodeCademy代码。

JSFiddle JSFiddle

HTML: 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
            </div>
        </div>
    </div>
</body>

CSS: 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: 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);

Answer 1

I assume you mean you want the click to open/close the article being clicked, and close other articles. 我假设您的意思是您希望单击以打开/关闭正在单击的文章，并关闭其他文章。 I made an updated fiddle , and it has the relevant code for the onClick, which should be enough for you to figure out how to handle the keypress case. 我做了一个更新的小提琴，它具有onClick的相关代码，您应该足以了解如何处理按键情况。

relevant JS 相关JS

var current = $(this).hasClass('current');
$('.article').removeClass('current');
$('.description').hide();

if(!current) {
  $(this).addClass('current');
  $(this).children('.description').show();
}

如何使用jQuery雄辩地切换多个可折叠项目列表中的show / hide事件？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-30 21:57:53

如何使用jQuery雄辩地切换多个可折叠项目列表中的show / hide事件？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-30 21:57:53

解决方案1
0 已采纳 2015-07-30 21:57:53