将悬停更改为单击菜单答案

【问题标题】：Changing hover to click on menu将悬停更改为单击菜单
【发布时间】：2013-10-12 02:51:16
【问题描述】：

我无法更改要在“单击”而不是“悬停”时调用的函数。我尝试将“悬停”更改为“点击”以及“切换”，但没有得到积极的结果

$('#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/

【问题讨论】：

标签： javascript jquery html css user-interface

【解决方案1】：

试试这个：

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

设置一个变量来跟踪点击状态

【讨论】：

如果我希望菜单比按钮宽怎么办？
您必须添加更多样式来专门针对按钮宽度与向下滑动的项目宽度。或者它可能涉及使用嵌套的 ul 列表设置菜单...通常菜单是用嵌套 ul 列表以创建水平或垂直菜单
@m_p -- 为了时间的缘故，这里是一个很好的理解我嵌套 ul 列表的意思 -- cssmenumaker.com/blog/flat-dropdown-menu-tutorial --

【解决方案2】：

您将两个参数传递给$(...).click(clickHandle)。只需传递一个函数。

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

在两个参数的情况下，

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

【讨论】：

我不确定我是否理解，我是否需要摆脱这两个匿名函数之一并将动画更改为切换？
你想发生什么？只需将所有功能都放在一个功能中
我猜 PAPARFRESH 的答案就是你要找的。span>

【解决方案3】：

click 在我更改时只需要一个参数即可，一切正常。

【讨论】：

【解决方案4】：

hover() 接受两个回调，一个用于mouseenter，一个用于mouseleave。如果你想把它改成点击，第一次点击开始第一个动画，第二次开始第二个动画，你需要添加一个状态变量来判断你的元素是被点击过一次还是两次。

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

);

【讨论】：