0

Есть такая разметка:

$('.open-block-biz').click(function(e) {
  $(this).find('.link').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div class="bx-shadow">
  <div class="title mt-20 open-block-biz">Заголовок</div>
  <div class="link" style="display: none;">
    <a href="#">Ссылка</a>
  </div>
</div>


<div class="bx-shadow">
  <div class="title mt-20 open-block-biz">Заголовок 2</div>
  <div class="link" style="display: none;">
    <a href="#">Ссылка 2</a>
  </div>
</div>

Но ничего не происходит... В чем моя ошибка?

1
  • Проблема в том, что .find ищет элементы в родителе. Получается у вас .link ищется в .open-block-biz. Используйте ответ Igor, в его ответе скрипт возвращается от .open-block-biz к его родителю .bx-shadow и от него ищет .link
    – De.Minov
    Commented 8 янв. 2019 в 15:30

2 ответа 2

1

Метод .find ищет внутри дочерних элементов.

Клик производится по элементу

<div class="title mt-20 open-block-biz">Заголовок</div>

Соответственно внутри него и осуществляется поиск, и, так как, в нем нет нужных элементов - ничего не происходит.


Так как нужно показывать элемент, который следует за нажимаемым, для его выделения можно воспользоваться методом .next

$('.open-block-biz').click(function(e) {
  $(this).next('.link').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div class="bx-shadow">
  <div class="title mt-20 open-block-biz">Заголовок</div>
  <div class="link" style="display: none;">
    <a href="#">Ссылка</a>
  </div>
</div>


<div class="bx-shadow">
  <div class="title mt-20 open-block-biz">Заголовок 2</div>
  <div class="link" style="display: none;">
    <a href="#">Ссылка 2</a>
  </div>
</div>

1

$('.open-block-biz').click(function(e) {
  $(this).closest(".bx-shadow").find('.link').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

<div class="bx-shadow">
  <div class="title mt-20 open-block-biz">Заголовок</div>
  <div class="link" style="display: none;">
    <a href="#">Ссылка</a>
  </div>
</div>

<div class="bx-shadow">
  <div class="title mt-20 open-block-biz">Заголовок 2</div>
  <div class="link" style="display: none;">
    <a href="#">Ссылка 2</a>
  </div>
</div>

Ваш ответ

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

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