1

Добрый день.

У меня есть несколько элементов списка:

<li>
  <a href="#">
    <span class="background-text"></span>
    <span>Amazing video</span>
  </a>
  <div class="additional-text">
    Lorem...
  </div>
</li>
<li>
  <a href="#">
    <span class="background-text"></span>
    <span>Amazing video</span>
  </a>
  <div class="additional-text">
    Lorem...
  </div>
</li>

Мне нужно реализовать так: При нажатии на <span class="background-text">, должен открыться один блок .additional-text, который находится внутри первого li (изначально у блока .additional-text стоит стиль display: none), при нажатии на второй <span class="background-text">, открываться .additional-text только внутри второго li.

При любой попытке реализовать (с учетом добавления id или без), почему-то отображаются все существующие .additional-text на странице. Как можно это обойти?

Заранее большое спасибо.

1
  • 2
    Приложите, пожалуйста, используемый вами js-код и css-стили. 17 июл 2017 в 12:46

1 ответ 1

0

Чтобы открывать относящийся к отпределенной "кнопке" блок, нужно искать его в общем родителе. Сделать это можно, используя метод .closest().

$('.background-text').on('click', function() {
  var add = $(this).closest('li').find('.additional-text');
  $('.additional-text').not(add).slideUp(400); // сворачиваем все блоки, кроме необходимого
  $(this).closest('li').find('.additional-text').slideToggle(400); // разворачиваем необходимый блок
});
.background-text {
  display: block;
  width: 30px;
  height: 30px;
  background: #000;
}

.additional-text {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">
      <span class="background-text"></span>
      <span>Amazing video</span>
    </a>
    <div class="additional-text">
      Lorem...
    </div>
  </li>
  <li>
    <a href="#">
      <span class="background-text"></span>
      <span>Amazing video</span>
    </a>
    <div class="additional-text">
      Lorem...
    </div>
  </li>
</ul>

Также посоветовал бы вам вешать событие клика не на span, а на a.

3
  • Спасибо огромное. Все отлично работает!
    – Kate
    17 июл 2017 в 13:06
  • Можете, пожалуйста, еще подсказать такое: как реализовать так, что бы одновременно нельзя было открыть несколько блоков (при нажатии на кнопку у меня открывается блок)? т.е. так, что бы всегда был открыт только один, а если пользователь хочет открыть другой, то первый закрывался.
    – Kate
    17 июл 2017 в 14:18
  • @Kate обновил ответ
    – Cheg
    17 июл 2017 в 14:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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