Jquery slideToggle close event triggered just after open

Monday, May 5, 2014

I have a side menu like below:



<div class="col-sm-3 col-md-2 sidebar">
<ul class="sideMenu nav nav-sidebar">
<li class="dontHide">First menu</li>
<li><a href="http://ift.tt/Wao6TO">1</a></li>
<li><a href="http://ift.tt/Wao6TO">2</a></li>
<li><a href="http://ift.tt/Wao6TO">3</a></li>
<li><a href="http://ift.tt/Wao6TO">4</a></li>
</ul>
<ul class="sideMenu nav nav-sidebar">
<li class="dontHide">test2</li>
<li><a href="http://ift.tt/Wao6TO">1</a></li>
<li><a href="http://ift.tt/Wao6TO">2</a></li>
<li><a href="http://ift.tt/Wao6TO">3</a></li>
<li><a href="http://ift.tt/Wao6TO">4</a></li>
</ul>
<ul class="sideMenu nav nav-sidebar">
<li class="dontHide">test3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

</div>


nav and nav-sidebar are bootstrap classes here jquery code:



$(document).ready(function () {
$('.sideMenu').on('click', function (e) {
$(this).children(':not(.dontHide)').slideToggle();
console.log("Clicked")
});
})


As You can see it should toggle children


for starting hidden I use this css:



.nav-sidebar > li :not(.dontHide){
display:none;
}


Problem is with that the slide is triggered to close just after click which should open it.


Here Jsfiddle: CLICK







http://ift.tt/1kNZzTw