通过切换()交替使用“点击”和/或“悬停”来激活菜单下拉菜单

时间:2014-08-04 19:09:18

标签: jquery css

我有一个简单的CSS驱动下拉菜单。我使用jQuery通过点击'来切换下拉列表。或者'悬停。'但是,如果点击"菜单"两次(显示,然后再次隐藏),悬停状态变为禁用状态。在这种情况下,有没有人知道使用悬停状态返回切换的方法?

JSFiddle

非常感谢!

HTML

<ul class="menu">
    <li> <a class="trigger">MENU</a>

        <ul class="dropdown">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </li>
</ul>

CSS

.menu, .menu ul {
        list-style:none;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .menu a {
        float:left;
        text-decoration:none;
        color:#000;
    }
    .menu li:hover > a {
        color:#666;
    }
    .menu ul {
        opacity:0;
        visibility:hidden;
        position:absolute;
        top:25px;
        z-index:1;
        background:#666;
    }
    .menu li:hover > ul {
        opacity:1;
        visibility:visible;
    }
    .menu ul a {
        padding:5px;
        display:block;
        text-transform:none;
    }
    .menu ul a:hover {
        background-color:lightgray;
    }

的jQuery

$('.trigger').on("click hover", function() {
    $('.dropdown').toggle();
});

1 个答案:

答案 0 :(得分:1)

它不在这里,但我确定你已经在这行代码中加入了CSS:

.trigger:hover .dropdown {
   display: block;
}

我建议你将它添加到你的CSS中。

.trigger:hover .dropdown,
.trigger.clicked .dropdown {
   display: block;
}

这会显示您悬停此<li>时以及clicked课程时的菜单。

然后,你必须添加这行javascript:

var timeoutMenu = null;
$('.trigger').on("click", function() {
    $('.dropdown').toggleClass('active');
});

$('.trigger').hover(function() {
    clearTimeout(timeoutMenu);
    $('.dropdown').toggleClass('active');
}, function() {
    setTimeout(function() {
      $('.dropdown').removeClass('active');
    }, 500);
});

当您将鼠标悬停在菜单上时,会显示其子菜单,当您将鼠标输出时,该菜单会隐藏500毫秒。

希望它有所帮助。

问候。

相关问题