Toggle для соседнего дива в общем

277

17 декабря 2017, 09:39

Есть куча блоков с одинаковыми стилями

<div class='totall'>
<a class='link'>text</a>
<div class='opis' style="display:none;"> text text text
</div>
</div>

требуется через клик $('.link').click(function()
менять через toggle видимость

пробовал так

$('.link').click(function()
{
  $(this).closest('.opis').toggle( "slow" );
  });

Answer 1

Меняем closest на next и усё.

Проблема с closest в том, что он будет искать ближайший подходящий элемент из числа следующих: сам выбранный элемент, его родитель, его прародитель, а не ближайший среди соседних элементов

$('.link').click(function() { 
  $(this).next('.opis').toggle("slow"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='totall'> 
  <a class='link'>text</a> 
  <div class='opis' style="display:none;"> text text text</div> 
</div> 
<div class='totall'> 
  <a class='link'>text2</a> 
  <div class='opis' style="display:none;">text2 text2 text2</div> 
</div> 
<div class='totall'> 
  <a class='link'>text3</a> 
  <div class='opis' style="display:none;">text3 text3 text3 </div> 
</div> 
<div class='totall'> 
  <a class='link'>text4</a> 
  <div class='opis' style="display:none;"> text4 text4 text4</div> 
</div>

Answer 2

Используйте метод next()

jQuery(document).ready(function($) { 
  $('.link').click(function() { 
    $(this).next('.opis').toggle(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='totall'> 
  <a class='link'>Click</a> 
  <div class='opis' style="display:none;"> text text text 
  </div> 
</div> 
<div class='totall'> 
  <a class='link'>Click</a> 
  <div class='opis' style="display:none;"> text text text 
  </div> 
</div> 
<div class='totall'> 
  <a class='link'>Click</a> 
  <div class='opis' style="display:none;"> text text text 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Тест программа на JQuery

Создать программу тест на JQuery, каждый отдельный вопрос хранится в виде объектаИнформация которая относится к вопросу имеет следующие характеристики:...

303

jQuery