使用CSS和jQuery下拉的问题

我想用jQuery和CSS创建一个下拉菜单。
Here is jsFiddle 使用CSS和jQuery下拉的问题

但是，这似乎不工作。任何人都可以指出我错过了什么？

2012-01-11 Jignesh Manek

钙你描述什么“似乎并不好”？ – 2012-01-11 06:37:57

@sergio：你可以在jsfiddle链接中看到这个问题。当我尝试将光标指向子菜单时，会调用onMouseOut事件。我不明白为什么它发生.. – 2012-01-11 06:41:01

我想去jsfiddle，并试图找出什么“似乎并不奏效”的最后一件事。如果你不在乎提问，为什么我要照顾回答？ – 2012-01-11 06:43:24

这里是工作的代码，但它是一个有点比你有什么更复杂：

var timer; 

function openMenu() { 
    $(this).addClass('open'); 
} 

function keepOpen() { 
    clearTimeout(timer); 
} 

function closeMenu() { 
    $(this).removeClass('open'); 
    timer = setTimeout(function() {closeMenu(this);}, 50); 
} 

$('#userbox').hover(keepOpen, closeMenu); 
$('#userbox').click(openMenu);

例子：http://jsfiddle.net/stulentsev/v6TvC/3/

来源

2012-01-11 07:12:02

感谢您的这一点。它现在工作:)我想知道为什么我的代码与onMouseOver而不是onClick工作！ – 2012-01-11 07:21:25

@JigneshManek：我会给你一个提示。 'console.log'是你的朋友:-) – 2012-01-11 07:24:47

您当前的代码是：

<div id="userbox" onClick="$(this).addClass('open');"  onMouseOut="$(this).removeClass('open');"> 
    <h3>Administrator</h3> 
    <ul> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
</div>

的onclick是什么，我认为是错误的，它应该是的onmouseover。当你改变它：

<div id="userbox" onmouseover="$(this).addClass('open');" onMouseOut="$(this).removeClass('open');"> 
    <h3>Administrator</h3> 
    <ul> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
</div>

下拉菜单的作品。

希望此回答有帮助。

来源

2012-01-11 06:46:17

但我想要菜单填充时，用户单击“管理员”.. – 2012-01-11 06:47:52

刚刚从代码中删除所有的jQuery和css中添加此

#userbox:hover ul{ display:block;}

演示：http://jsfiddle.net/v6TvC/8/

来源

2012-01-11 07:21:05

我们应该检查什么？把你的代码放在这里。 – BoltClock 2012-01-11 08:02:50

最简单的办法我能想出的jQuery：

$('#userbox h3').click(function() { 
    $('#userbox ul').show('100'); 
}); 

$('#userbox').bind('mouseleave', function() { 
        $('#userbox ul').hide('100'); 
});

来源

2012-01-11 07:31:32 Indrek

感谢解决方案Indrek！:) – 2012-01-11 08:37:42

DEMO fiddle

$('#userbox').click(function(){ 
     $(this).addClass('open'); 
}).mouseleave(function(){ 
     $(this).removeClass('open'); 
});

DEMO fiddle 2

$('#userbox').bind('click mouseleave',function(ev){ 
    ev.type === 'click' ? $(this).addClass('open') : $(this).removeClass('open'); 
});

来源

2012-01-11 07:39:38

嘿谢谢！这个解决方案更好！ :) – 2012-01-11 08:33:54

@Jignesh :)不客气 – 2012-01-11 09:45:13

使用CSS和jQuery下拉的问题

回答

相关问题