单击按钮后无法显示隐藏的对象

Question

我正在尝试设置网站的某个方面，除非有人单击网页底部的按钮，否则以前的文章将被隐藏。在单击display：none功能之前，我要隐藏div。我希望新的div出现并在单击按钮后展开页面底部。为此，我将.button：active设置为单击后将显示更改为display：block。不幸的是，当单击按钮时，什么也没有发生。我想知道你们是否可以帮助我。我将包括这个问题的JS Fiddle。谢谢！

.StoriesBox {
  width: 35.5%;
  margin-left: 32.2%;
  margin-top: 3%;
  line-height: 190%;
}

.StoriesBox2 {
  display: none;
  width: 35.5%;
  margin-left: 32.2%;
  margin-top: 3%;
  line-height: 190%;
}

.StoriesTitle {
  font-size: 165%;
}

.Chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  font-size: 58%;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  margin-top: 4%;
  margin-left: 22.5%;
  margin-bottom: 5%;
  padding: 4%;
  padding-top: 1%;
  padding-bottom: 3%;
  padding-right: 20%;
  padding-left: 20%;
  text-align: center;
  text-decoration: none;
  font-size: 70%;
  font-family: "eraslight";
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

.button:active .StoriesBox2 {
  display: block;
}

<section class="stories">

  <div class="StoriesBox">
    <div class="StoriesTitle">

      <h2>Title Length</h2>

      <div class="StoriesDate">

        <h3>2018<span class="Chinese">		年</span> 09<span class="Chinese">月</span> 28<span class="Chinese">日</span></h3>
      </div>

      <p>Please know, the opinions expressed on this site will portray the cultural, societal, and political differences between China and the United States from my own, personal perspective. This means always highlighting the positives and never sugarcoating
        the negatives - a process which always results in concrete critical analysis. If you have any questions, concerns, or just want to chat, please feel free to contact me through one of the media platforms directly below. Thank you and enjoy!</p>

    </div>
  </div>

  <div class="StoriesBox2">
    <div class="StoriesTitle">

      <h2>Title Length</h2>

      <div class="StoriesDate">

        <h3>2018<span class="Chinese">		年</span> 09<span class="Chinese">月</span> 28<span class="Chinese">日</span></h3>
      </div>

      <p>Hi. My name is Ragan, John Ragan to be exact - but please, call me JR. I'm a third year student who's currently attending Shanghai Jiao Tong University in pursuit of two B.S. in electrical and computer engineering in addition to a B.A. in Chinese</p>

    </div>
  </div>

  <button class="button button5">
	<h2>Previous</h2></button>
</section>

Answer 1

您可以使用此：

.StoriesBox2 + button:active  {
  display: block;
}

但是，当您单击按钮时，它将仅显示StoriesBox2 div。如果要在单击后显示此div，则必须使用JavaScript。