Question

我想在我的下拉菜单中实现以下效果，仅使用CSS和HTML？

基本上这个想法是当鼠标移动到下拉菜单之外时，它会一直打开，直到你在菜单外面或X秒后点击。是否有可能在没有任何额外的库或技术（除CSS和HTML之外）的情况下实现这一目标？

Answer 1

更新：现在问题已经澄清，如果不使用JavaScript，您似乎无法实现这种行为。我确实找到了pure CSS clickable dropdown的示例，但它不符合您的所有标准。

--- 问题澄清之前的原始答案 ---
你实际上在这里问了两个问题。您最初没有指定首选技术来完成此任务，因此我使用jQuery找到了每个的答案。（这些答案使用.show（）和.hide（）来显示/隐藏元素 - 但如果您愿意，也可以使用.css（）直接更改CSS。）

下拉菜单一直打开，直到点击菜单外
您可以检测文档上的单击，然后检查是否存在立即祖先，以查看是否单击了所需的元素。（部分信用：https://stackoverflow.com/a/3028037/561309）

$(document).click(function(event) { 
    if($(event.target).closest('#menucontainer').length) {
        if($('#menucontainer').is(":hidden")) {
            $('#menucontainer').show();
        }
    }

    if(!$(event.target).closest('#menucontainer').length) {
        if(!$('#menucontainer').is(":hidden")) {
            $('#menucontainer').hide();
        }
    }        
})

下拉保持打开状态直到某段时间过去
您可以使用setTimeout函数在一段时间后更改CSS - 例如此处为两秒。 .stop方法应该在鼠标移回菜单后保持执行超时，但是应该对此进行测试。（部分信用：https://stackoverflow.com/a/14247096/5365001）

$(document).ready(function(){
    $("#menucontainer").click(function(){
        $("#menucontainer").toggle());
    });

    $("#menucontainer").mouseout(function(){
        setTimeout(function(){ $("#menucontainer").hide(); },2000);
    });

    $("#menucontainer").mouseover(function(){
        $("#menucontainer").stop(); });
    });
});

而且，如果你想两者结合，这应该可以解决问题：

$(document).ready(function(){
    $(document).click(function(event) { 
        if($(event.target).closest('#menucontainer').length) {
            if($('#menucontainer').is(":hidden")) {
                $('#menucontainer').show();
            }
        }

        if(!$(event.target).closest('#menucontainer').length) {
            if(!$('#menucontainer').is(":hidden")) {
                $('#menucontainer').hide();
            }
        }        
    })

    $("#menucontainer").mouseout(function(){
        setTimeout(function(){ $("#menucontainer").hide(); },2000);
    });

    $("#menucontainer").mouseover(function(){
        $("#menucontainer").stop(); });
    });
});

下拉菜单后：悬停效果

1 个答案: