Question

我正在尝试使用jQuery和CSS创建一个下拉菜单 Here is jsFiddle

但这似乎不太好用。任何人都可以指出我错过了什么吗？

Answer 1

这是工作代码，但它比你的更复杂：

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/

Answer 2

我可以用jQuery提出最简单的解决方案：

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

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

Answer 3

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

Answer 4

您当前的代码是：

<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>

下拉菜单有效。

希望这个答案有所帮助。

Answer 5

从代码中删除所有jquery并将其添加到css

中

#userbox:hover ul{ display:block;}

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

使用CSS和jQuery下拉的问题

5 个答案: