БЛОГ НА HUSL


Как сделать чтобы выбор одного из элементов списка ul li влиял на показ одного из скрытых списков ul?

Автор вопроса: mace

Помогите пожалуйста. У меня есть список с фильмами. Нажав на фильм, нужно чтобы погружался список с его частями (1 часть, 2 чать и тп.) остальные все списки скрытые пока их не выберут.

.selectvalue {
    display:none;
 }
 
 .selectvalue.active {
    display:block;
 }
<div class="selectlink">
    <div class="selectlink-control">Список фильмов</div>
          <ul>
             <li><a href="#">Гарри Поттер</a></li>
             <li><a href="#">Хоббит</a></li>
             <li><a href="#">Властелин Колец</a></li>
             <li><a href="#">Звездные войны</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue active">
    <div class="selectlink-control">Гарри Поттер</div>
          <ul>
             <li><a href="#">1 часть</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Хоббит</div>
          <ul>
             <li><a href="#">1 часть</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Властерин Колец</div>
          <ul>
             <li><a href="#">1 часть</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>


Источник

Ответы (2 шт):

Автор решения: Павел Ериков

Вот примерный код, но сразу хочу сказать, что я не специалист на js так что может есть способ и изящней.

let prevPart = -1;
function getParts(index){
    let parts = document.getElementsByClassName('selectvalue');
  if(index < parts.length && !parts[index].classList.contains('active')){
    parts[index].classList.add('active');
    if(prevPart != -1)
        parts[prevPart].classList.remove('active');
    prevPart = index;
  }
}
.selectvalue {
    display:none;
 }
 
 .selectvalue.active {
    display:block;
 }
<div class="selectlink">
    <div class="selectlink-control">Список фильмов</div>
          <ul>
             <li><a href="#" onclick="javascript:getParts(0)">Гарри Поттер</a></li>
             <li><a href="#" onclick="javascript:getParts(1)">Хоббит</a></li>
             <li><a href="#" onclick="javascript:getParts(2)">Властелин Колец</a></li>
             <li><a href="#" onclick="javascript:getParts(3)">Звездные войны</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Гарри Поттер</div>
          <ul>
             <li><a href="#">1 часть Гарри Поттер</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Хоббит</div>
          <ul>
             <li><a href="#">1 часть Хоббит</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Властелин Колец</div>
          <ul>
             <li><a href="#">1 часть Властелин Колец</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

Или вот версия без javascript:getParts():

const films = document.getElementsByClassName("selectlink-control")[0].getElementsByTagName("li");

for (var i = 0; i < films.length; i++) {
    films[i].addEventListener('click', getParts, false);
}

let prevPart = -1;
function getParts(event){
  var child = event.toElement.parentNode;
  var parent = child.parentNode;
  //Находим индекс нажатого фильма в списке
  var index = Array.prototype.indexOf.call(parent.children, child);
  let parts = document.getElementsByClassName('selectvalue');
  if(index < parts.length && !parts[index].classList.contains('active')){
    parts[index].classList.add('active');
    if(prevPart != -1)
        parts[prevPart].classList.remove('active');
    prevPart = index;
  }
}
.selectvalue {
    display:none;
 }
 
 .selectvalue.active {
    display:block;
 }
 
 
<div class="selectlink">
    <div class="selectlink-control">
        Список фильмов
        <ul>
          <li><a href="#">Гарри Поттер</a></li>
          <li><a href="#">Хоббит</a></li>
          <li><a href="#">Властелин Колец</a></li>
          <li><a href="#">Звездные войны</a></li> 
        </ul>
    </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Гарри Поттер</div>
          <ul>
             <li><a href="#">1 часть Гарри Поттер</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Хоббит</div>
          <ul>
             <li><a href="#">1 часть Хоббит</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue">
    <div class="selectlink-control">Властелин Колец</div>
          <ul>
             <li><a href="#">1 часть Властелин Колец</a></li>
             <li><a href="#">2 часть</a></li>
             <li><a href="#">3 часть</a></li>
             <li><a href="#">4 часть</a></li> 
          </ul>
     </div>
</div>

→ Ссылка
Автор решения: fortavey

Я бы сделал так:

Каждому элементу списка с фильмами добавить уникальные id (potter, hobbit, ring, star ).

И эти же значения присвоить как класс в соответствующий блок со списком частей фильма.

<div class="selectlink">
    <div class="selectlink-control">Список фильмов</div>
          <ul>
             <li id="potter"><a href="#">Гарри Поттер</a></li>
             <li id="hobbit"><a href="#">Хоббит</a></li>
             <li id="ring"><a href="#">Властелин Колец</a></li>
             <li id="star"><a href="#">Звездные войны</a></li> 
          </ul>
     </div>
</div>

<div class="selectvalue active potter">
    <div class="selectlink-control">Гарри Поттер</div>
          <ul>
             ...
          </ul>
     </div>
</div>

<div class="selectvalue hobbit">
    <div class="selectlink-control">Хоббит</div>
          <ul>
             ... 
          </ul>
     </div>
</div>

<div class="selectvalue ring">
    <div class="selectlink-control">Властерин Колец</div>
          <ul>
             ... 
          </ul>
     </div>
</div>

<div class="selectvalue star">
    <div class="selectlink-control">Звездные войны</div>
          <ul>
             ... 
          </ul>
    </div>
</div>

А потом по клику на название фильма скрывать все списки и показывать тот у которого класс совпадает с id фильма по которому кликнули.

const filmList = [...document.querySelectorAll('.selectlink li')];
const allLists = [...document.querySelectorAll('.selectvalue')];

filmList.forEach(film => {
    const filmClass = film.id;
    film.addEventListener('click', e => {
        allLists.forEach(el => el.classList.remove('active'));
        document.querySelector('.' + filmClass).classList.add('active');
    });
});

Ну или если без добавления классов и id, то можно так:

const filmList = [...document.querySelectorAll('.selectlink li')];
const allLists = [...document.querySelectorAll('.selectvalue')];

filmList.forEach((film, index) => {
    film.addEventListener('click', e => {
        allLists.forEach((el, idx) => {
            index == idx ? el.classList.add('active') : el.classList.remove('active');
        });
    });
});

Но этот вариант будет работать только если порядок фильмов совпадает с порядком блоков с частями этих фильмов.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.