jquery on click not functioning correctly

Question

Hi have tried to create a dropmenu to work on click so touch screens can use the menu.

$('a.dropsmall2').click(function() {
$(this).next('ul').slideToggle(500,'easeInOutQuad');

});

this part seems to function.

$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').hide('medium');

});

this part does work a bit but once you click it the menu opens and closes before it finally stays closed.

$('#dropmenu ul').mouseleave(function() {
$(this).slideToggle(500,'easeInOutQuad');

}); this part works but once the mouse leaves the menu is then able to be opened on hover rather then being clicked (not sure if its this part messing it up or the first part of the code.

jsfiddle ---> http://jsfiddle.net/e9e17adm/15

Answer 1

This CSS below, is your problem,

.dropmenu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .3s ease .1s;
    -moz-transition: height .3s ease .1s;
    -o-transition: height .3s ease .1s;
    -ms-transition: height .3s ease .1s;
    transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
    height: 27px;
    line-height: 27px;
    overflow: visible;
    padding: 0;
}

You have already added :hover transition to your sub list. So, basically in the CSS you have mentioned that onhover of main LI the height of its submenu BI should increase to 27px. It's just that initially in CSS the Submenu is

display: "none";

So, you are not able to see the CSS transition which you see later on after click event. Because, when you do an jquery onclick and do a slideDown This also, attaches a

display: "block";

property in the inline style of the submenu UL element

And Hence, now you are able to see the transition effects of the CSS which you yourself have added above.

UPDATE:

Updated your fiddle to fix your issue. Let me know if that is what you wanted..

http://jsfiddle.net/e9e17adm/16/