Question

我对javascript非常陌生，我试图为我正在处理的网站提供一些动态功能。特别是，我想要一个展开的菜单项，分别在鼠标打开和关闭时展开和折叠。

我将展开的部分放下，但只要鼠标离开菜单项曾经的区域，事件监听器就会触发折返，但事件虽然它已被扩展。

HTML标记如下所示：

<nav id="nav">
<ul>
    <li id="elemPlaces"><ul id="drop"><li>Places</li></ul></li>
</ul>
</nav>

事件侦听器声明如下：

<script type="text/javascript">

var extended = false;
var listPlace = (<?php echo json_encode($list_place); ?>);

document.getElementById("elemPlaces").addEventListener("mouseover", extend);

document.getElementById("elemPlaces").addEventListener("mouseout", retract);

</script>

以及扩展和收回功能如下：

function extend()
{
    if(!extended)
    {
        var drop = document.getElementById("drop");
        var form = document.createElement("form");

        form.setAttribute("action", "place.php");
        form.setAttribute("method", "get");
        drop.appendChild(form);

        for(var i = 0; i < listPlace.length; i++)
        {
            var li = document.createElement("li");
            var input = document.createElement("input");

            li.setAttribute("class", "dropOption");

            input.setAttribute("type", "submit");
            input.setAttribute("name", "location");
            input.setAttribute("value", listPlace[i]);

            li.appendChild(input);
            form.appendChild(li);
        }
        extended = true;
    }
}

function retract()
{
    var dropOption = document.getElementsByClassName("dropOption");

    while(dropOption[0])
    {
        dropOption[0].parentNode.removeChild(dropOption[0]);
    }
    extended = false;
}

我意识到这一切都必须看起来很业余，但就像我说的，我对此很陌生。如果有人能帮助我，我真的很感激。

Answer 1

所以基本上你想要的是确保菜单在折叠前保持展开一定的时间？这是一些想法

而不是在retract上调用mouseout，您可以调用另一个超时的函数，例如retract_after

function retract_after(){
    setTimeout(function(){ retract() }, 3000);
}

但是这可能会导致奇怪的情况（想象一下，用户在移出它之后，在超时到期之前在菜单上移动鼠标......）。因此，您可能希望查找如何清空队列或删除EventListeners。

或者，你能做什么，只是附上＆＃34;撤回＆＃34;鼠标悬停功能结束时的eventListener（最终还有超时），并在缩回时或之后删除eventlistener。

jquery库的animate（）函数在某种程度上已经默认产生了你正在寻找的行为（它将动画排队，但如果用户快速触发mouseenter和mouseout事件监听器，菜单将继续折叠/展开直到它清空了队列）

Answer 2

好的JSFiddle似乎失败了，so here is a Plunker

基本上：

使用mouseenter和mouseleave（see this question）
我相信你的情况你只想重定向到一个传递GET选项的页面。您可以使用<a href="yourpage.php?yourOption=yourValue">执行此操作。它更简单。你不需要表格。
正如我所说，修改dom是一个坏主意。或者，这取决于您的列表来自何处。如果您的$list_place来自AJAX异步请求，那么显然您不能做任何其他事情，只能动态修改DOM。但是，如果您事先知道列表的内容是什么，最好只是将所有内容写入HTML，然后添加class="unexpanded/expanded"等类，并拥有CSS .unexpanded{display: none}。然后你只需要切换/更改类

Javascript：addEventListener没有考虑更新的DOM？

2 个答案: