我如何在两个jQuery函数之间切换

Question

I have my dropdown menu script bellow:

$(document).ready(function() {
  $('.myMenu > li').bind('mouseover', openSubMenu);
  $('.myMenu > li').bind('mouseout', closeSubMenu);
  function openSubMenu() {            
    $(this).find('ul').css('visibility', 'visible');            
  };                

  function closeSubMenu() {            
    $(this).find('ul').css('visibility', 'hidden');         
  };                       
});

It shows dropdown menu when the mouse gets over. I want to implement this on my responsive theme, so it has to be click. I tried following code:

    $('.myMenu > li').toggle(openSubmenu, closeSubmenu);

Instead of 2 lines of .bind . But it wouldn't work, neither did .click method helped. So how do I put two states/functions into .toggle method ?

Answer 1

如果多数民众赞成在点击时发生，那么您可以使用一个点击处理程序，而改为切换CSS类：

 $('.myMenu > li').bind('click', function(e) {$(this).toggleClass('hidden')});

Answer 2

Instead of using mouse events you can simply use hover also use show() and hide() instead of css hidden and don't worry it's cross-browser.

$(document).ready(function() {
    $('.myMenu').hover(function(){
        $(this).find('ul').show();
    }, function(){
        $(this).find('ul').hide();
    });
});

Answer 3

Use "on" to add event listeners for both mouseover and click.

$(document).ready(function() {
    $('.myMenu > li').on('mouseover click', openSubMenu);
    $('.myMenu > li').on('mouseout', closeSubMenu);

    function openSubMenu() {        
        $(this).find('ul').css('visibility', 'visible');            
    };                
    function closeSubMenu() {              
        $(this).find('ul').css('visibility', 'hidden');         
    };                       
});

Answer 4

I would create one handler for the class toggling, and bind it to all of the desired events like so:

CSS

li.hidden ul {
    visibility: hidden;
}

Javascript

var toggleHiddenClass = function(){
    $(this).toggleClass('hidden');
};
$('.myMenu > li').bind('mouseover mouseout click', toggleHiddenClass);

Answer 5

.toggle(); method accepts a boolean value true to show and false to hide.

So you can check the event type if event type is mouseover then show the hidden ul otherwise on mouseout hide it.

Also as a side note you can use .on() which is now standards of event binding in jquery.

Try this:

$('.myMenu > li').on('mouseover mouseout', function(e){
    $(this).find('ul').toggle(e.type === "mouseover");
});

 $('ul > li').on('mouseover mouseout', function(e) { $(this).find('ul').toggle(e.type === "mouseover"); }); 

 ul ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>menu <ul> <li>sub menu</li> </ul> </li> </ul>