将悬停更改为单击菜单

Changing hover to click on menu

本文关键字：单击 菜单 悬停      更新时间：2023-09-26

我在更改要在"单击"而不是"悬停"时调用的函数时遇到问题。我尝试将"悬停"更改为"单击"以及"切换"，但没有积极的结果

$('#menu li').hover(
    function(){
            $(this).stop().animate({height: '100px'},1000,function(){});
            $(this).find('div').show(600);
        }
    ,
    function(){
            $(this).stop().animate({height: '20px'},1000,function(){});
        } 
  );

如果我想将事件更改为"单击"，是否必须绑定事件？任何帮助将不胜感激。

这是小提琴：http://jsfiddle.net/GANeX/7/

试试这个：

http://jsfiddle.net/GANeX/52/

var clicked = 0;
$('#menu li').click(
   function(){
        if(clicked === 0){
            $(this).stop().animate({height: '100px'},1000,function(){});
            $(this).find('div').show(600);
            clicked = 1;
        } else if(clicked === 1){
            $(this).stop().animate({height: '20px'},1000,function(){});  
            clicked = 0;
        }
    }
 );

设置变量以跟踪单击状态

您正在向$(...).click(clickHandle)传递两个参数。只需传递一个函数。

检查 http://api.jquery.com/click/

在两个参数的情况下， 

http://api.jquery.com/click/

单击只需要一个参数，当我更改时一切都可以正常工作。

hover()接受两个回调，一个用于mouseenter，一个用于mouseleave。如果要将其更改为单击，并且第一次单击启动第一个动画，第二次单击启动第二个动画，则需要添加一个状态变量来确定您的元素是否已单击一次或两次。

$('#menu li').click(
function(){
        if(this.clicked)
        {
         //callback 1
        }
        else
       {
        //callback 2
       }
       this.clicked = !this.clicked;
    }

）;

相关文章：