Выявление скрытых объектов при нажатии кнопки не работает - PullRequest
Новая
       31

Выявление скрытых объектов при нажатии кнопки не работает

0 голосов
/ 27 сентября 2018

Я пытаюсь настроить аспект моего сайта, где предыдущие статьи будут скрыты, если кто-то не нажмет кнопку внизу веб-страницы.У меня есть 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>

1 Ответ

0 голосов
/ 27 сентября 2018

Вы можете использовать это: 

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

Но он покажет только StoriesBox2 div, когда вы нажмете кнопку.Если вы хотите, чтобы этот div был виден после клика, вам придется использовать JavaScript.

...