Why does $ (this) not work?

Question

$(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>

I would like the slide toggl when pressed, but I think that the selector is not correctly set.

Please tell me what the problem is, why does $(this) not work?

PS: jquery hooked up

do not pay attention, I just experimented, there is a slideToggle ();
in general, this function should write $ (this) .find ('. dropb'). css ({"display": "block"});

Accepted Answer · 2016-11-10T08:01:13

 $(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>

I would recommend you initially for dropb prescribe in display: none; styles display: none;
and then in the script it will be possible to remove the line $('.dropb').fadeOut(0); at the beginning $('.dropb').fadeOut(0);

Pavel Mayorov Pavel Mayorov 48.9k five 50 110 · Answer 2 · 2016-11-10T08:43:22

Generally speaking, $(this) works for you. It does not work for you .find('.dropb') - because the .dropb elements .dropb not children of .menu-item .

It is necessary to search from the parent:

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

everything is clear, I thought that .menu-item is in the div

C.Raf.T C.Raf.T 3,954 one 6 nineteen · Answer 3 · 2016-11-10T07:59:22

 $(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 · 2016-11-10T10:23:43

look at my example

 $(".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>

just don't add additional subscriptions to the click event on the links.

A drop-down menu - so in general, the author is initially hidden.

Alex 6,232 five nineteen 29 · Answer 5 · 2016-11-10T07:57:33

$(this) in this case is a link element, there is no .dprop inside it.

Example:

 $(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>

if the code contains several links with a submenu with the class '.dropb', then your code will not be correct ...

Why does $ (this) not work?

5 answers 5

More articles: