jquery problems with toggle in combination with .click() and .hover()

Question

I have a problem when I'm using .click() and .hover() in combination with toggle.

I have a "menu" which should be opened/closed on hover, but can also be closed/reopened on click. But if I'm opening the menu with hover and then close it with a click, it opens again If i stop hovering it.

Here's my code (jsfiddle)

HTML

<ul>
<li><span>Click Me</span>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 1</a></li>
    </ul>
</li>
</ul>

JS

$(function() {
    $("ul").hover(function() {
        $(this).find('ul').toggle();
    });
    $("ul").click(function() {
       $(this).find('ul').toggle();
    });
});

CSS

ul{
    margin: 0;
    padding: 0;
    border: 1px solid black;
    position: relative;
}

li{
    list-style-type: none;
}

ul ul{
    display: none;
    position: absolute;
    width: 100%;
    left: -1px;
}

span{
    display: block;
    padding: 5px;
    background-color: #eeeeee;
}

a{
    background-color: #eee;
    display: block;
    padding: 5px;
}

a:hover{
    background-color: white;
}

I know what the problem is, but I don't know how to fix it. I hope someone has a solution.

Bhushan Kawadkar · Accepted Answer · 2014-08-11 13:03:22Z

2

You have to write two hover function for mouse in and out instead of using toggle like below :

$(function() {
        $("ul").hover(function() {
            $(this).find('ul').show();
        },function() {
            $(this).find('ul').hide();
        });
        $("ul").click(function() {
           $(this).find('ul').toggle();
        });
    });

Demo

answered Aug 11, 2014 at 13:03

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

emjay Over a year ago

Okay, that works great! Thanks :) Do you know how I can change the behaviour on a tablet that I need a "double tap" because of the hover effect.

Bhushan Kawadkar Over a year ago

you mean you want to use double click instead of click?

emjay Over a year ago

Yep, I don't like it that a tablet user has to click 2 times.

ro0ter · Accepted Answer · 2014-08-11 13:04:16Z

2

Use the first hover constructor:

$("ul").hover( handlerIn, handlerOut )

...instead of second which has same function for both operations:

.hover( handlerInOut )

Regards ;)

answered Aug 11, 2014 at 13:04

ro0ter

4392 silver badges11 bronze badges

Comments

RGS · Accepted Answer · 2014-08-11 13:05:15Z

2

$(function() {
   $("ul").hover(function() {
     $(this).find('ul').show();
   }, 
   function(){
     $(this).find('ul').hide()
   });
   $("ul").click(function() {
     $(this).find('ul').toggle();
   });
});

Add mouseout function also in your hover function.

Demo:

http://jsfiddle.net/6jzdgcap/

answered Aug 11, 2014 at 13:05

RGS

5,2217 gold badges45 silver badges69 bronze badges

Comments

Marek · Accepted Answer · 2014-08-11 13:08:40Z

2

You may also prefer to use mouseenter (http://api.jquery.com/mouseenter/) and mouseleave (http://api.jquery.com/mouseleave/) if you find this easier to read.

    $(function() {
        $("ul")
        .mouseenter(function() {
            $(this).find('ul').show();
        })
        .mouseleave(function() { 
           $(this).find('ul').hide(); 
        });

        $("ul").click(function() {
           $(this).find('ul').toggle();
        });
    });

answered Aug 11, 2014 at 13:08

Marek

901 silver badge7 bronze badges

Comments

T J · Accepted Answer · 2014-08-11 13:06:40Z

1

Instead of toggle() which creates the issue, You can use slideUp() and slideDown() separately in the callbacks functions of hover as follows:

$(function () {
     $("ul").hover(function () {
            $(this).find('ul').slideDown();
     },
     function () {
            $(this).find('ul').slideUp();
     });

     $("ul").click(function () {
            $(this).find('ul').toggle();
     });
});

Demo

answered Aug 11, 2014 at 13:06

T J

43.2k13 gold badges87 silver badges142 bronze badges

Collectives™ on Stack Overflow

jquery problems with toggle in combination with .click() and .hover()

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related