CODEWITHSUNDEEP
javascriptjqueryhtml
NewBoy
NewBoy

Reputation: 1144

jquery show and hide mouseout() issue

I have set up a jquery hover show and hide function click here for site however it doesn't work the way i want it to. When you hover over the link "store" it reveals the hidden div, which is a submenu, once the mouse cursor has been moved from the link "store" the hidden div slides.

I want the submenu to stay activate unless one the links in the submenu have been click on or the mouse cursor is have been moved outside of the submenu area.

below is a snippet of my code...

 $(document).ready(function(){
        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').hover(function(){
        $(".slidingDiv").slideToggle();
        });

        $('.slidingDiv').mouseout(function(){
        $(".slidingDiv").slideUp();
    });
      });

<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
  <li><a href="#">sweats / knitwear</a></li>
  <li><a href="#">shirts</a></li>
  <li><a href="#">denim</a></li>
  <li><a href="#">outwear</a></li>
  <li><a href="#">footwear</a></li>
</ul>
</div>
<div class="menu">
    <h3>lifestyle</h3>
 <ul class="navigation">
     <li><a href="#">books</a></li>
     <li><a href="#">art</a></li>
     <li><a href="#">objects</a></li>
 </ul>


<div id="menu">
<ul class="cl">
    <li><a class="show_hide" href="#">store</a></li>
    <li><a href="#">daily</a></li>
    <li><a href="#">featured</a></li>
    <li><a href="#">contact</a></li>

</ul>

Does anyone have a solution for this...?

Upvotes: 2

Views: 1247

Answers (1)

user1508519
user1508519

Reputation:

I figured it out. http://jsfiddle.net/vtFfv/ Relevant documentation: http://api.jquery.com/mouseleave/

$(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').mouseenter(function () {
        $(".slidingDiv").slideDown();
        $(".slidingDiv").mouseleave(function () {
            $(".slidingDiv").slideUp();
        });
        $('.slidingDiv a').each(function () {
            $(this).click(function () {
                $(".slidingDiv").slideUp();

            });
        });
    });
});

When you hide slidingDiv, mouse events aren't registered. So the solution is to attach a mouseleave event to it once you decide to show it (that is, on mouseenter). And then registering clicking on the links is easy.

Upvotes: 1

Related Questions