SimonSimon SimonSimon - 1 year ago 144
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download