Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрыть список по клику вне его (https://javascript.ru/forum/dom-window/82304-skryt-spisok-po-kliku-vne-ego.html)

lev90 17.04.2021 18:15

Скрыть список по клику вне его
 
Добрый вечер!

Я новичок в javascript. Есть рабочий скрипт выпадающих списков. Всем хорош, кроме того, что не закрывает предыдущий список, после клика по соседнему или клика вне списков.
Подскажите пожалуйста, как можно сюда добавить закрытие списков по клику вне списка или по следующему списку.

Заранее всем спасибо!

const selectedAll = document.querySelectorAll(".selected");

selectedAll.forEach(selected => {
const optionsContainer = selected.previousElementSibling;
const optionsList = optionsContainer.querySelectorAll(".option");

 selected.addEventListener("click", () => {
   if (optionsContainer.classList.contains("active")) {
       optionsContainer.classList.remove("active");
        } else {
      let currentActive = document.querySelector("options-container.active");

 if (currentActive) {
    currentActive.classList.remove("active");
   }
    optionsContainer.classList.add("active");
   }
})

   optionsList.forEach(o => {
     o.addEventListener("click", () => {
       selected.innerHTML = o.querySelector("label").innerHTML;
       optionsContainer.classList.remove("active");
     });
   });
})


<div class="select-box">
   <div class="options-container">
      <div class="option">
         <label for="automobiles2" class="button_cost">
              <input type="radio" class="radio" value="" id="automobiles2" name="category2" />
               All</label>
      </div>

      <div class="option">
         <label for="film2" class="button_cost">
            <input type="radio" class="radio" value=".iii" id="film2" name="category2" /> 
             Film Animation</label>
      </div>

      <div class="option">
         <label for="science2" class="button_cost">
            <input type="radio" class="radio" value=".uuu" id="science2" name="category2" />
             Science Technology</label>
      </div>

   <div class="selected">
      Select Video Category
   </div>
</div>


.select-box {
  position: relative;
  display: flex;
  width: 400px;
  flex-direction: column;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;

  order: 1;

  position: absolute;
  z-index: 100;
}

.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;

  order: 0;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  height: 100%;
  width: 32px;
  right: 10px;
  top: 5px;

  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  margin-top: 104px;
}

.select-box .options-container.active + .selected::after {
  transform: rotateX(180deg);
  top: -6px;
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}

/* Searchbox */

.search-box input {
  width: 100%;
  padding: 12px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  position: absolute;
  border-radius: 8px 8px 0 0;
  z-index: 100;
  border: 8px solid #2f3640;

  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
}

.search-box input:focus {
  outline: none;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}

рони 17.04.2021 18:28

lev90,
темы плодить зачем?

рони 17.04.2021 18:35

lev90,
сделайте макет целиком с css, js, html.
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 17.04.2021 18:43

lev90,
форум - поиск - кастомизация
https://javascript.ru/forum/misc/666...tml#post439228

https://javascript.ru/forum/misc/590...tml#post393087

lev90 17.04.2021 19:18

Понял как закрыть список по клику вне списка.
Осталось понять как закрыть предыдущий открытый список.
document.addEventListener('click', function(e) {
   if (e.target !== optionsContainer) {
      optionsContainer.classList.remove("active");
   }
})

рони 17.04.2021 19:21

lev90,
:-?

lev90 18.04.2021 18:32

Подскажите пожалуйста, как добавить кнопку сброса, чтобы привести списки к первоначальному состоянию.

рони 18.04.2021 19:11

Цитата:

Сообщение от рони
сделайте макет целиком с css, js, html.

:-?

lev90 18.04.2021 23:08

Мне необходимо добавить кнопку "Сброс", для сброса значений всех радиокнопок и показать исходные значения <div class="selected"> All ...</div> или значения первых label списков.


.select-box {
         display: flex;
         width: 100%;
         flex-direction: column;
      }

      .select-box .options-container {
         background: #2f3640;
         color: #f5f6fa;
         opacity: 0;
         transition: all 0.4s;
         border-radius: 8px;
         overflow: hidden;
         order: 1;
         position: absolute;
         top: 70px;
         max-height: 0;
      }

      .selected {
         background: #2f3640;
         border-radius: 8px;
         color: #f5f6fa;
         position: relative;
         order: 0;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         width: 250px;
      }

      .selected::after {
         content: "";
         background: url("/img/arrow-down.svg");
         background-size: contain;
         background-repeat: no-repeat;
         position: absolute;
         height: 100%;
         width: 32px;
         right: 10px;
         top: 5px;
         transition: all 0.4s;
      }

      .select-box .options-container.active {
         max-height: 500px;
         opacity: 1;
         overflow-y: scroll;
         z-index: 1;
      }

      .select-box .options-container.active+.selected::after {
         transform: rotateX(180deg);
         top: -6px;
      }

      .select-box .options-container::-webkit-scrollbar {
         width: 8px;
         background: #0d141f;
         border-radius: 0 8px 8px 0;
      }

      .select-box .options-container::-webkit-scrollbar-thumb {
         background: #525861;
         border-radius: 0 8px 8px 0;
      }

      .select-box .option,
      .selected {
         padding: 5px 10px;
         cursor: pointer;
      }

      .select-box .option:hover {
         background: #414b57;
      }

      .select-box label {
         cursor: pointer;
      }

      .select-box .option .radio {
         color: #525861;
      }

      .button_cost {
         position: relative;
         display: inline-block;
         font-size: 90%;
         font-weight: 700;
         color: rgb(209, 209, 217);
         text-decoration: none;
         text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
         padding: 0.5em 1em;
         outline: none;
         border-radius: 3px;
         background: linear-gradient(rgb(220, 207, 113), rgb(194, 174, 48)) rgb(220, 207, 113);
         box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 3px 5px rgba(0, 1, 6, 0.5), 0 0 1px 1px rgba(0, 1, 6, 0.2);
         transition: 0.2s ease-in-out;
         cursor: pointer;
         width: 100%;
      }

      .button_cost:active {
         top: 1px;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 2px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.1);
      }

      .button_cost input {
         cursor: pointer;
         position: absolute;
         opacity: 0;
         display: block;
         height: 0;
         width: 0;
      }


<form>
<button type="reset" class="reset">Сброс</button>

      <div class="select-box">
         <div class="options-container">
            <div class="option">
               <label for="all" class="button_cost">
                  <input type="radio" class="radio" value="" id="all" name="val1" /> All 1</label>
            </div>

            <div class="option">
               <label for="film" class="button_cost">
                  <input type="radio" class="radio" value=".pink" id="film" name="category2" /> Film</label>
            </div>

            <div class="option">
               <label for="science" class="button_cost">
                  <input type="radio" class="radio" value=".blue" id="science" name="category" /> Technology</label>
            </div>
         </div>
         <div class="selected"> All 1 </div>
      </div>

      <br><br><br><br><br><br><br><br>

      <div class="select-box">
         <div class="options-container">
            <div class="option">
               <label for="all2" class="button_cost">
                  <input type="radio" class="radio" value="" id="all2" name="val2" /> All 2</label>
            </div>

            <div class="option">
               <label for="film2" class="button_cost">
                  <input type="radio" class="radio" value=".iii" id="film2" name="category2" /> Animation</label>
            </div>

            <div class="option">
               <label for="science2" class="button_cost">
                  <input type="radio" class="radio" value=".uuu" id="science2" name="category2" /> Science
                  Technology</label>
            </div>
         </div>
         <div class="selected"> All 2</div>
      </div>
   </form>


const selectedAll = document.querySelectorAll(".selected");

      selectedAll.forEach(selected => {
         const optionsContainer = selected.previousElementSibling;
         const optionsList = optionsContainer.querySelectorAll(".option");

         selected.addEventListener("click", (e) => {
            e.stopPropagation();
            if (optionsContainer.classList.contains("active")) {
               optionsContainer.classList.remove("active");
            } else {
               let currentActive = document.querySelector(".options-container.active");
               if (currentActive) {
                  currentActive.classList.remove("active");
               }
               optionsContainer.classList.add("active");
            }
            if (optionsContainer.classList.contains("active")) {
            }
         });

         document.addEventListener('click', function (e) {
            if (e.target !== optionsContainer) {
               optionsContainer.classList.remove("active");
            }
         })
         optionsList.forEach(o => {
            o.addEventListener("click", () => {
               selected.innerHTML = o.querySelector("label").innerHTML;
               optionsContainer.classList.remove("active");
            });
         });
      });

рони 19.04.2021 07:52

lev90,
document.querySelector('.reset').addEventListener("click", () => {
document.querySelectorAll(".option:first-child").forEach(o => o.click());
})


Часовой пояс GMT +3, время: 16:01.