Открытие блока при нажатии

336

18 июля 2017, 17:57

Добрый день.

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

<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 на странице. Как можно это обойти?

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

Answer 1

Чтобы открывать относящийся к отпределенной "кнопке" блок, нужно искать его в общем родителе. Сделать это можно, используя метод .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.