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);

而不是2行.bind。但它不起作用，.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

使用＆＃34; on＆＃34;为鼠标悬停和单击添加事件侦听器。

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

<强>的Javascript

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

如何在两个jquery函数之间切换

4 个答案: