Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2021, 18:15
Интересующийся
Отправить личное сообщение для lev90 Посмотреть профиль Найти все сообщения от lev90
 
Регистрация: 31.01.2021
Сообщений: 10

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

Я новичок в 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;
}

Последний раз редактировалось lev90, 17.04.2021 в 19:21. Причина: Добавил CSS
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2021, 18:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

lev90,
темы плодить зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 17.04.2021, 18:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #4 (permalink)  
Старый 17.04.2021, 18:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

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

https://javascript.ru/forum/misc/590...tml#post393087
Ответить с цитированием
  #5 (permalink)  
Старый 17.04.2021, 19:18
Интересующийся
Отправить личное сообщение для lev90 Посмотреть профиль Найти все сообщения от lev90
 
Регистрация: 31.01.2021
Сообщений: 10

Понял как закрыть список по клику вне списка.
Осталось понять как закрыть предыдущий открытый список.
document.addEventListener('click', function(e) {
   if (e.target !== optionsContainer) {
      optionsContainer.classList.remove("active");
   }
})
Ответить с цитированием
  #6 (permalink)  
Старый 17.04.2021, 19:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

lev90,
Ответить с цитированием
  #7 (permalink)  
Старый 18.04.2021, 18:32
Интересующийся
Отправить личное сообщение для lev90 Посмотреть профиль Найти все сообщения от lev90
 
Регистрация: 31.01.2021
Сообщений: 10

Подскажите пожалуйста, как добавить кнопку сброса, чтобы привести списки к первоначальному состоянию.
Ответить с цитированием
  #8 (permalink)  
Старый 18.04.2021, 19:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

Сообщение от рони
сделайте макет целиком с css, js, html.
Ответить с цитированием
  #9 (permalink)  
Старый 18.04.2021, 23:08
Интересующийся
Отправить личное сообщение для lev90 Посмотреть профиль Найти все сообщения от lev90
 
Регистрация: 31.01.2021
Сообщений: 10

Мне необходимо добавить кнопку "Сброс", для сброса значений всех радиокнопок и показать исходные значения <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");
            });
         });
      });

Последний раз редактировалось lev90, 18.04.2021 в 23:12.
Ответить с цитированием
  #10 (permalink)  
Старый 19.04.2021, 07:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

lev90,
document.querySelector('.reset').addEventListener("click", () => {
document.querySelectorAll(".option:first-child").forEach(o => o.click());
})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
меню как на mail.ru - его можно скрыть и содержимое раздвинется на всю страницу ange-linka Элементы интерфейса 4 16.09.2010 11:12
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 13:40
закрыти diva при клике вне его Hugo_O Элементы интерфейса 14 21.05.2010 13:39
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 10:27
Как избежать наложения текста(выпадающий список)? AlexMak (X)HTML/CSS 2 22.12.2008 09:52