Почему $(this) не работает?

506

24 ноября 2016, 10:00

    $(document).ready(function(){ 
    	$('.dropb').hide(); 
     
    	$('.menu-item').bind('click', function(){ 
    		 $(this).find('.dropb').css("display","block"); 
    	}); 
    	 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li> 
      <a class="menu-item" href="#">Утепление и отделка балкона</a> 
      <ul class="dropb"> 
        <li><a href="">fdsfdfsf</a></li> 
        <li><a href="">fdsfdfsf</a></li> 
        <li><a href="">fdsfdfsf</a></li> 
      </ul> 
    </li>

Я бы хотел, чтобы при нажатии был слайд тоггл, но думаю, что селектор не правильно поставлен.

Подскажите пожалуйста в чем проблема, почему $(this) не работает?

P.S.: jquery подключил

Answer 1

$(document).ready(function() { 
   
  $('.menu-item').click(function() { 
    $('.dropb').fadeOut(0); // прячем открытые блоки 
    $(this).children('.dropb').toggle(100); 
 
  }); 
 
});

.dropb { 
  display: none; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
  <div class="menu-item"> 
    <a href="#">Утепление и отделка балкона</a> 
    <ul class="dropb"> 
        <li><a href="">fdsfdfsf</a></li> 
        <li><a href="">fdsfdfsf</a></li> 
        <li><a href="">fdsfdfsf</a></li> 
    </ul> 
  </div> 
</li> 
<li> 
  <div class="menu-item"> 
    <a href="#">Утепление и отделка балкона</a> 
    <ul class="dropb"> 
        <li><a href="">fdsfdfsf</a></li> 
        <li><a href="">fdsfdfsf</a></li> 
        <li><a href="">fdsfdfsf</a></li> 
    </ul> 
  </div> 
</li>

Answer 2

Вообще говоря, $(this) у вас работает. Не работает у вас .find('.dropb') - потому что элементы .dropb не являются дочерними для .menu-item.

Надо искать от родителя:

$(this).parent().find('.dropb')...

Answer 3

$(document).ready(function() { 
  $('.dropb').hide(); 
 
  $('.menu-item').on('click', function() { 
    $(this).next().toggle(); 
  }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li><a class="menu-item" href="#">Утепление и отделка балкона </a> 
  <ul class="dropb"> 
    <li><a href="">fdsfdfsf</a> 
    </li> 
    <li><a href="">fdsfdfsf</a> 
    </li> 
    <li><a href="">fdsfdfsf</a> 
    </li> 
  </ul> 
 
</li>

Answer 4

посмотрите мой пример

$(".menu-item").click(function(){ 
  $(this).siblings().toggle(100); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li> 
  <a class="menu-item" href="#">Утепление и отделка балкона</a> 
  <ul class="dropb"> 
    <li><a href="">fdsfdfsf</a></li> 
    <li><a href="">fdsfdfsf</a></li> 
    <li><a href="">fdsfdfsf</a></li> 
  </ul> 
</li>

только не стоит на ссылки вешать дополнительные подписки на click событие.

Answer 5

$(this) в данном случае - это элемент ссылки, внутри него нет .dprop.

Пример:

$(document).ready(function(){ 
    $('.dropb').hide(); 
 
    $('.menu-item').on('click', function(){ 
         $('.dropb').toggle(); 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li> 
  <a class="menu-item" href="#">Утепление и отделка балкона</a> 
  <ul class="dropb"> 
    <li><a href="">fdsfdfsf</a></li> 
    <li><a href="">fdsfdfsf</a></li> 
    <li><a href="">fdsfdfsf</a></li> 
  </ul> 
</li>

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

Все вопросы

ТОП-10

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

Проверка на видимость блока в jquery

Добрый день! Есть наполовину рабочий код, не могу понять, где ошибка. .

422

jQuery

Как закрыть меню при клике вне него и при повторном клике на гамбургер?

При клике на кнопку открывается меню. При клике вне меню оно закрывается.

990

jQuery

JS выбор блока контента внешней ссылкой

На главной странице (stom-mva ru) одни пункты меню(ссылки) ведут на другие страницы, другие пункты - меняют на div'ы (основной "контент") с помощью этого...

406

jQuery

Добавление panel в panel-group bootstrap

Пытаюсь создать новую категорию. Отправляю ее на сервер для сохранения в базе, и если success,то хочу добавить ее ко всем остальным в panel-group.

362