目前我编写了一个程序，当您单击新闻 '.article' 标题时，'.description' 会在下方弹出，标题会突出显示为灰色以及所有其他头条新闻保持关闭状态。然后，当您单击另一个标题时，您单击的第一个标题将关闭，新标题将突出显示并打开。 JavaScript 看起来像这样:

var main = function() {
$('.article').click(function() {
    $('.article').removeClass('current');
    $('.description').hide();

    $(this).addClass('current');
    $(this).children('.description').toggle();
});

};

$(document).ready(main);

这是 'current' 的 CSS 看起来像这样:

.current .item {
 background: rgba(206,220,206,.9);
}

现在，我的问题是，我希望当前打开的文章在您再次单击时关闭。这就是为什么我写了切换命令 $(this).children('.description').toggle(); 而不是 .show()

但它没有切换...为什么？它打开，但不会关闭，除非我单击另一篇文章标题。我希望我写的内容有意义。这是我第一次尝试学习 javascript，我可以使用帮助。

完全披露:这是来自 codeacademy 关于构建交互式网站的类(class)，但他们的 Q/A 没有解决我的问题，显然它不再受到监控，因为他们正在停止这门类(class).

编辑:根据要求，这是一个 HTML 示例(它真的很长，所以我不想发布整个内容，但如果您愿意，我会发布)。

<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>

谢谢，

学习如何编码

最佳答案

问题是 $('.description').hide(); 隐藏了所有 .description 元素，然后您切换当前元素以显示。你只需要隐藏那些不是当前文章的 child

这是一个更简单的方法(基于 Scott 的回答，我很喜欢我们互相插入变得更好的方式):

$(document).ready(function() {
  $('.article').on('click', function() {
    var $this=$(this).toggleClass('current'); 
    $('.article').not($this).removeClass('current');
  });
});

.current .item {
  background: rgba(206, 220, 206, .9);
}
.article:not(.current) .description {
  display: none;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 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 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>

原答案:

问题是 $('.description').hide(); 隐藏了所有 .description 元素，然后您切换当前元素以显示。您只需要隐藏那些不是当前文章子项的文章，如下所示:

$('.article').not($(this)).find('.description').hide();

$(document).ready(function() {
  $('.article').click(function() {
    $('.article').removeClass('current');
     $('.article').not($(this)).find('.description').hide();
    $(this).addClass('current');
    $(this).children('.description').toggle();
  });
});

.article.current {
  background: rgba(206, 220, 206, .9);
}
.article:not(.current) .description {
  display: none;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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 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 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>

关于javascript - Toggle 不适用于我的 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38987255/

javascript - Toggle 不适用于我的 jQuery

原答案:

上一篇：html - HTML5 和 CSS3 中不透明的 z-index 问题

下一篇：javascript - 将 jQuery '.eq()' 与多个类一起使用