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

551
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>

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

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

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

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

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

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

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

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

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

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

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

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

404