Блог

Главная - Вопросы по программированию - событие onclick занимает два клика, новый гибкий элемент выливается из строки

событие onclick занимает два клика, новый гибкий элемент выливается из строки

#javascript #css #flexbox

#javascript #css #flexbox

Вопрос:

Я включил соответствующий код в это перо:https://codepen.io/whoismikeo/pen/YMvMmR

В основном я пытаюсь создать вводный раздел с кнопкой, которая показывает второй раздел рядом с ним (или под ним, на мобильном устройстве).

 <projectsheader class="row" id="Projects">
<h1>This Is a Title</h1>
</projectsheader>
    <projects>
      <div class="row"> <!--start flex row-->
        <div class="col" id="list-intro"> <!--start intro section-->
          <div class="to-do"> <!--start intro-->
          <h2>Here's a Subtitle</h2>
          <p>And a description!</p>
            <button type="button" 
            class="btn" 
            onclick="addProject();">Create a Flexy</button>
          </div> <!--end intro-->
        </div> <!--end intro section-->
        <div class="col" id="react-list"> <!--start hidden project section-->
          <div class="proj"> <!--start content-->
          <h2>This is Filler</h2>
          <p>A wee little app goes here.</p>
        </div> <!--end content-->
       </div> <!--end hidden project section-->
    </div> <!--end flex row-->
  </projects>

CSS:

 projectsheader {
    font-size: 10vh;
    justify-content: center;
    color: #011C43;
    margin-top: 1em;
    font-family: sans-serif;
}

h2, p {
  font-family: sans-serif;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 1em;
    flex-basis: 100%;
    flex: 1;
}

projects .col{
    background-color: rgb(192, 164, 255);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

projects .row{
    background-color: coral;
    height: 75vh;
    flex-wrap: wrap;
}

.to-do {
    margin: auto;
    padding: 5em;
}

#react-list {
    display: none;
    margin: auto;
    flex-direction: column;
    justify-content: space-around;
    margin: 1em;
    min-width: 50%;
    flex: 2;
}

JS:

 function addProject() {
   var target = document.getElementById("react-list");
   if (target.style.display === "none") {
      target.style.display = "flex";
   } else {
      target.style.display = "none";
   }
}

У меня две проблемы:

1) Я не могу понять, как предотвратить выпадение гибких столбцов из контейнера строк, когда он их переносит.

2) Событие onclick, которое переключает второй гибкий столбец, сначала активируется двумя щелчками мыши. После этого требуется только один.

Я пытался возиться с различными настройками строк, чтобы предотвратить выпадение столбцов, и искал здесь решение проблемы двойного щелчка, но, похоже, ничего не работает.

Любая помощь очень ценится!

Комментарии:

1. Не могли бы вы добавить код CSS и JS к вашему вопросу — ссылка не будет постоянной.

2. Не знал этого! Добавлено, спасибо за предупреждение.

3. Я имел в виду, что вы можете изменить код в нем позже, поэтому для справки у нас должен быть код с текущими проблемами здесь 🙂 Спасибо за их добавление

Ответ №1:

Ваш код JavaScript проверяет, имеет ли элемент с идентификатором newFlexItem display: none свойство style, поэтому это свойство style должно быть добавлено к элементу HTML, чтобы логика проверки работала при первом щелчке — она работает после первого щелчка, потому что ваш JS-код добавляет свойство display: none style к элементу в else блоке.

 <div class="col" id="newFlexItem" style="display: none">

Что касается проблемы с CSS, вы должны удалить height: 100vh , потому что это зависит от высоты порта просмотра. 

 projects .row {
    background-color: coral;
 /* height: 75vh; */
    flex-wrap: wrap;
}