CODEWITHSUNDEEP
jquery
Gallex
Gallex

Reputation: 321

jquery: slidedown submenu on hover

...and slide up on hover out, but not only. important!: forbidden to follow the parent link of submenu if clicked accidentaly.

below is quite similar what i would like to achieve, difference is: submenu slides down/up on click:

html:

<ul id="toggle">
<li> <a href="/">Home</a>
<li> <a href="/products">Products</a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="/products/potatos">Potatos</a></li>
        <li><a href="/products/carrots">Carrots</a></li>
  </ul>    </li>
<li><a href="/contact">Contact</a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="/contact/people">People</a></li>
        <li><a href="/contact/map">Map</a></li>
  </ul>
</li>
</ul>

javascript:

$('#toggle li:has(.dropdown-menu)').on('click', function (event) {
if ($(event.target).parents('.dropdown-menu').length > 0) {
    event.stopPropagation();
} else {
    event.preventDefault();
}
$(this).find('ul').slideToggle();
});

jsfiddle.net/Gallex/8hs7nhxw/

Upvotes: 0

Views: 544

Answers (2)

Krishnaraj
Krishnaraj

Reputation: 126

Try this

$('#toggle li:has(.dropdown-menu)').hover(function (event) {
if ($(event.target).parents('.dropdown-menu').length > 0) {
    event.stopPropagation();
} else {
    event.preventDefault();
}
$(this).find('ul').slideToggle();

});

hope this will help u.

Updated Fiddle

Upvotes: 1

Alex Slipknot
Alex Slipknot

Reputation: 2533

May be something like this? 

$('#toggle li:has(.dropdown-menu)').hover(function (event) {
    if ($(event.target).parents('.dropdown-menu').length > 0) {
        event.stopPropagation();
    } else {
        event.preventDefault();
    }
    $(this).find('ul').slideToggle();
});

Upvotes: 0

Related Questions