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

Question

我的下拉菜单脚本如下：

$(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');         
  };                       
});

鼠标悬停时显示下拉菜单。 我想在响应式主题上实现此功能，因此必须单击它。 我尝试了以下代码：

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

而不是.bind的2行。 但这是行不通的， .click方法也.click 。 那么，如何将两个状态/函数放入.toggle方法？

Answer 1

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

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

Answer 2

除了使用鼠标事件，您还可以简单地使用hover，也可以使用show（）和hide（）而不是隐藏的CSS，并且不用担心它是跨浏览器的。

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

Answer 3

使用“ on”为鼠标悬停和单击添加事件侦听器。

$(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

我将为类切换创建一个处理程序，并将其绑定到所有所需的事件，如下所示：

的CSS

li.hidden ul {
    visibility: hidden;
}

Java脚本

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

Answer 5

.toggle(); 方法接受一个布尔值true来显示，而false来隐藏。

因此，如果事件类型为mouseover则可以检查事件类型，然后显示隐藏的ul否则在mouseout上将其隐藏。

另外，您可以使用.on() ，它现在是jquery中事件绑定的标准。

尝试这个：

$('.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>