0

Помогите пожалуйста. У меня есть список с фильмами. Нажав на фильм, нужно чтобы погружался список с его частями (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>

3
  • Если вам помог мой ответ, то пожалуйста можете выбрать его как "Правильный ответ" или если остались вопросы по вопросу, то можете задать мне их я обязательно на них отвечу :) Commented 7 янв. 2021 в 0:07
  • Подскажите пожалуйста как сделать чтобы не по индексу нажатие было javascript:getParts(0) а если к каждому li класс поставить?
    – mace
    Commented 8 янв. 2021 в 8:51
  • Добавил в ответ вариант без javascript:getParts() Commented 8 янв. 2021 в 14:40

2 ответа 2

1

Вот примерный код, но сразу хочу сказать, что я не специалист на 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>

1

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

Каждому элементу списка с фильмами добавить уникальные 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');
        });
    });
});

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.