Как скрыть другие элементы в сворачиваемом списке?

main
1

Как изменить код, чтобы при открытии одного элемента списка автоматически скрывались все остальные элементы? Хотелось бы, чтобы повторное нажатие на открытый элемент возвращало его в исходное состояние. Также интересуют любые альтернативные способы реализации, которые могут привести к аналогичному результату. Спасибо!

2

Конечно! Давай разберемся, как это можно сделать. Предположим, мы работаем с HTML списком и нам нужно добавить функциональность на JavaScript, чтобы реализовать открытие и закрытие элементов. Один из простых способов — использовать JavaScript в сочетании с CSS для управления состоянием отображения.

HTML

Создадим простой список:

<ul id="myList">
  <li data-target="item1">Элемент 1</li>
  <div id="item1" class="content">Контент 1</div>
  <li data-target="item2">Элемент 2</li>
  <div id="item2" class="content">Контент 2</div>
  <li data-target="item3">Элемент 3</li>
  <div id="item3" class="content">Контент 3</div>
</ul>

CSS

Сначала скроем все элементы контента по умолчанию:

.content {
  display: none;
}

JavaScript

Теперь добавим логику, чтобы открывать и закрывать элементы:

document.querySelectorAll('#myList li').forEach(item => {
  item.addEventListener('click', function() {
    const contentId = this.getAttribute('data-target');
    const contentElement = document.getElementById(contentId);

    // Скрыть все другие элементы
    document.querySelectorAll('.content').forEach(content => {
      if (content !== contentElement) {
        content.style.display = 'none';
      }
    });

    // Переключить видимость текущего элемента
    if (contentElement.style.display === 'none' || contentElement.style.display === '') {
      contentElement.style.display = 'block';
    } else {
      contentElement.style.display = 'none';
    }
  });
});

Объяснение:

  1. HTML: Каждый элемент списка <li> имеет атрибут data-target, который помогает идентифицировать связанный элемент контента <div>.
  2. CSS: Устанавливаем для блоков контента display: none; по умолчанию, чтобы они были скрыты.
  3. JavaScript:
    • По клику на элемент списка мы определяем связанный элемент контента.
    • Все элементы контента проходят проверку и скрываются, если они не являются тем, который мы только что выбрали.
    • Переключаем видимость связанного элемента контента: он отображается, если был скрыт, и скрывается, если был виден.

Эта реализация позволяет добиться нужного поведения: по клику на элемент списка другие закрываются, а повторное нажатие на открытый элемент скрывает его. Надеюсь, это поможет реализовать задуманное! Если у тебя есть ещё вопросы или нужна помощь в доработке, не стесняйся обращаться. . Я ответил на ваш вопрос?

3

Чё, привет! Слушай, я тут пытался замутить одну штуку — скрыть элементы в сворачиваемом списке. Читал всякие советы, как это сделать, но как-то всё не сработало, короче.

Сначала я вот испробовал стандартные подходы, типа добавления классов к элементам, которые нужно прятать. Сделал всё, как там написано — добавил класс “hidden” и настроил CSS, чтобы при этом классике они просто не отображались. Но, блин, всё равно они лезут на экран. Ну, типа, скрываю их, но они всё равно остаются видимыми, просто могут быть кликабельными и всё такое.

Потом, думаю, может, дело в JavaScript. Заюзал такую функцию, чтобы по клику на заголовок списка должно было всё прятаться. Но вот тут тоже фейл! У меня всё само по себе разворачивается, даже когда я не нажимаю. Думал, по умолчанию этот скрипт сам решил, что раз так, значит, надо показываться. Помучился с переменными, дебажил, что к чему, но всё равно не заработало.

Пробовал и разные библиотеки, читал форумы, где народ делился фишками. Но, похоже, не срослось. Чувствую себя немножко неудачником с этим. В общем, если у кого-то есть идеи, как это можно сделать, буду признателен!

4

Привет! Не парься, такое у всех бывает. Я попробую помочь разобраться с этой задачей. Давай посмотрим на стандартные варианты. Может быть, где-то что-то упускается.

CSS Подход

Если у тебя стоит задача именно скрыть элементы, то CSS-класс вроде .hidden должен делать своё дело с помощью свойства display: none;. Например:

.hidden {
  display: none;
}

Проверь, чтобы в HTML действительно элементы, которые ты планируешь скрыть, получили этот класс, и чтобы в CSS не было никаких конфликтующих стилей, которые могли бы переопределять display.

JavaScript Подход

Если проблема на стороне JavaScript, то можно попробовать такой подход для кликабельного раскрытия и сворачивания:

<button onclick="toggleVisibility()">Toggle List</button>
<ul id="myList">
  <li class="hidden">Item 1</li>
  <li class="hidden">Item 2</li>
</ul>

function toggleVisibility() {
  const listItems = document.querySelectorAll('#myList li');
  listItems.forEach(item => {
    if (item.classList.contains('hidden')) {
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
}

Библиотеки

Если тебя интересуют библиотеки, то, может быть, стоит протестировать jQuery, если ещё не пробовал. Там можно использовать методы вроде .slideToggle() для создания анимационных эффектов.

Дебаггинг

Пока это не заработает, убедись, что:

  1. Нет конфликтующих JS скриптов, которые могут противодействовать твоим.
  2. Все элементы получают необходимые классы.
  3. JavaScript соединяется правильно с HTML (используй консоль, чтобы смотреть, исполняется ли код так, как нужно).

Если после этого решения будут работать, дай знать. Если что-то упустил или что-то другое глючит, напиши, попытаемся найти решение! . Я ответил на ваш вопрос?