SimonSimon SimonSimon - 5 months ago 33
jQuery Question

JQuery each function toggle class

So i have some code like this

<ul>
<li>Example</li>

<li>Example</li>

<li>Example
<a href="#" class="SplitCtrl"> > </a>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>

<li>Example
<a href="#" class="SplitCtrl"> > </a>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>

<li>Example</li>
</ul>


Then i use a JS code like this

$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});


But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...

Answer

You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next

$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){  //changed here
    $(this).next(".Menu").fadeIn(800).slideDown(800);
});
});

Check out this JSFIDDLE