Question

我真的很喜欢这个下拉菜单示例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

我将非常感谢您的支持！提前谢谢你的时间！

Answer 1

为了做到这一点，你需要做两件事。

将jsddm_open功能绑定到click事件而不是mouseover。
在的所有内容上绑定click个事件，但运行jsddm_close的菜单。

像this：

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

确保您也在jsddm_open停止传播，否则第二个事件会因冒泡而开火。

function jsddm_open(event)
{
    // other stuff
    event.stopPropagation();
}

下拉菜单 - 将鼠标悬停效果转换为ONCLICK

1 个答案: