Показать сообщение отдельно
  #14 (permalink)  
Старый 21.10.2020, 17:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,609

Aruta,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
ul{
list-style: none;
}
.filter__list{
    display: flex;
}

li.active-show .filter__list{
color: #8B4513;
font-weight: bold;
}
.filter__list  +  div{
    display: none;
}
li.active-show .filter__list  +  div{
    border: 1px solid #FF0000;
    display:  block;
}
.filter__list:after{
    content: "▼"
}
li.active-show .filter__list:after{
    content: "▲"
}
  </style>
</head>
<body>
<ul class="results__filter-inner dflex">
   <!-- Блок конкретного фильтра. Далее каждая группа фильтров обозначена li id="название фильтра" -->
    <li id="gender">
        <!--Блок названия группы фильтра и стрелочки -->
        <div class="filter__name filter__list">
             <div>Gender</div>
        </div>
        <!--Раскрывающийся список группы -->
        <div class="filter__name__list-wrap dflex">
             <div class="name__list-inner">
                  <div class="name__list">
                       <input type="checkbox" id="chk_men" class="toggle" name="chk_men" value="Men">
                        <label for="chk_men" class="name__list-label">Men</label>
                  </div>
                  <div class="name__list">
                       <input type="checkbox" id="chk_women" class="toggle" name="chk_women" value="Women">
                       <label for="chk_women" class="name__list-label">Women</label>
                  </div>
             </div>
        </div>
    </li>
    <li id="priority">
        <div class="filter__name filter__list">
             <div>Priority</div>
       </div>
        <div class="filter__name__list-wrap">
             <div class="name__list-inner">
                  <div class="name__list">
                       <input type="checkbox" id="chk_color" class="toggle" name="chk_color" value="Color">
                       <label for="chk_color" class="name__list-label">Color</label>
                  </div>
                  <div class="name__list">
                       <input type="checkbox" id="chk_style" class="toggle" name="chk_style" value="Style">
                        <label for="chk_style" class="name__list-label">Style</label>
                  </div>
             </div>
        </div>
    </li>
    <li id="prod_type">
        <div class="filter__name filter__list">
             <div>Product type</div>
        </div>
        <div class="filter__name__list-wrap" >
             <div class="name__list-inner">
                  <div class="name__list">
                       <input type="checkbox" id="chk_shirt" class="toggle" name="chk_shirt" value="Shirt">
                       <label for="chk_shirt" class="name__list-label">Shirt</label>
                  </div>
                  <div class="name__list">
                       <input type="checkbox" id="chk_blouse" class="toggle" name="chk_blouse" value="Blouse">
                       <label for="chk_blouse" class="name__list-label">Blouse</label>
                  </div>
                  <div class="name__list">
                       <input type="checkbox" id="chk_top" class="toggle" name="chk_top" value="Top">
                       <label for="chk_top" class="name__list-label">Top, T-shirt, Sweatshirt</label>
                  </div>
                  <div class="name__list">
                       <input type="checkbox" id="chk_sweater" class="toggle" name="chk_sweater" value="Sweater">
                       <label for="chk_sweater" class="name__list-label">Sweater</label>
                  </div>
             </div>
        </div>
    </li>
    <li>
        <input type="checkbox" id="dublicate" class="toggle" name="dublicate">
        <label for="dublicate">Remove dublicate</label>
    </li>
    <li>
       <div class="filter__name clear">
           <div>Clear</div>
       </div>
    </li>
</ul>
<script>
const ul = document.querySelector('.results__filter-inner');
let tempLi;
document.addEventListener('click', event => {
    let filterUl = event.target.closest('ul');
    let li = event.target.closest('li');
    if (tempLi && li != tempLi) {
        tempLi.classList.remove('active-show');
        tempLi = null;
    }
    if (filterUl == ul) {

        if (li.querySelector('.filter__list')) {
            tempLi = li;
            let input = event.target.closest('[type="checkbox"]');
            if (input) li.querySelectorAll('[type="checkbox"]').forEach(el => el != input && (el.checked = false));
            if (event.target.closest('.filter__list')) tempLi.classList.toggle('active-show');
        }
        if (li.querySelector('.clear')) {
            ul.querySelectorAll(':checked').forEach(el => el.checked = false);
        }
    }
})
</script>
</body>
</html>
Ответить с цитированием