javascript - 动画显示 block /无，具有相应的功能

Question

所以，我会解释清楚，我想为列表设置动画，例如，当我点击文章时，这会隐藏所有其他元素，只显示与点击相关的所有文章

开始时比较的内容相互替换即显示 block /无的行为。

但我无法制作动画，所以如果您有解决方案，我会采纳它们!

我不关心动画，我想了解原理。

感谢

Answer 1

您可以使用 jQuery 隐藏元素喜欢bdalina建议并仅显示被点击的文章。

// Hides all articles but the one clicked.
$('article').click(function(){
	$('article').slideUp();
  $(this).slideDown();
});

body {
  font-family: sans-serif;
  background: #003B93;
}

section {
  width: 200px;
  margin: 20px auto;
}

article {
  cursor: pointer;
  margin-bottom: 20px;
  text-align: center;
  background: #BABABA;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  width: 150px;
  padding: 20px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <article>First article.</article>
  <article>Second article.</article>
  <article>Third article.</article>
  <article>Fourth article.</article>
  <article>Fifth article.</article>
</section>

请have a look at this answer此外，它还展示了解决该问题的另一种方法。

希望这能以某种方式有所帮助。