0

我真的很喜欢这个下拉菜单示例http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ 。我试图申请我的项目。但是我发现这个下拉菜单令人讨厌的鼠标悬停效果，但我喜欢它在我的项目中的样子。现在，我想请求那些更了解 jQuery 的人的支持，以帮助我将功能从鼠标悬停转换为 ONCLICK ......
见下面的功能 -

var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;

function jsddm_open()
{   jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{   if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{   closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{   if(closetimer)
    {   window.clearTimeout(closetimer);
        closetimer = null;}}

$(document).ready(function()
{   $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;

另外，您可以看到我的FIDDLE

，我将非常感谢您的支持！提前感谢您的宝贵时间！

4

1 回答 1

3

为此，您需要做两件事。

  1. jsddm_open将函数绑定到click事件而不是mouseover.
  2. 对除运行的菜单之外的所有内容绑定click事件。jsddm_close

像这样的东西：

$(document).ready(function()
{   $('#jsddm > li').bind('click', jsddm_open);
    $(document).bind('click',  jsddm_close);
});

确保你也停止传播jsddm_open，否则第二个事件会因为冒泡而触发。

function jsddm_open(event)
{
    // other stuff
    event.stopPropagation();
}
于 2013-07-15T21:47:16.977 回答