Question

我已经看过一些关于类似问题的帖子，但我有点像新手，所以我很难连接点，以便清楚我的代码需要如何改变，希望有人可以让我直截了当。

我正在尝试创建一个显示指定元素onMouseOver的函数，然后再将它隐藏在onMouseOut上。我在这里努力的领域是我需要在元素消失之前有一个延迟。我之前从未真正使用时间延迟功能，所以我有点试图让它工作。

通过网上的一些研究，似乎我可以将“setTimeout”直接插入标签上的onmouseout属性，然后简单地包含hide函数和时间长度，但这似乎不起作用。 / p>

标记部分1（重要部分是＆lt; \ rect＆gt;标记）：

<svg height="400" width="580" xmlns="http://www.w3.org/2000/svg"> 
<g>
<title></title>
<rect fill="#fff" height="402" id="canvas_background" width="582" x="-1" y="-1"></rect> 
<g display="none" height="100%" id="canvasGrid" overflow="visible" width="100%" x="0" y="0"> <rect fill="url(#gridpattern)" height="100%" stroke-width="0" width="100%" x="0" y="0"></rect> </g> </g> <g>
<title></title>

<rect fill="#fff" height="66" id="svg_1" onmouseover="toggle_visibility('groupOne')" onmouseout="setTimeout(toggle_hidden('groupOne'), 2000)"  stroke="#000" stroke-width="1.5" width="126" x="74.5" y="73.299999"></rect> 

<rect fill="#fff" height="84" id="svg_2" onmouseover="toggle_visibility('groupTwo')" onmouseout="setTimeout(toggle_hidden('groupTwo'), 2000)" stroke="#000" stroke-width="1.5" width="124" x="76.5" y="173.299999"></rect> 

<rect fill="#fff" height="42" id="svg_3" onmouseover="toggle_visibility('groupThree')" onmouseout="setTimeout(toggle_hidden('groupThree'), 2000)" stroke="#000" stroke-width="1.5" width="68" x="240.5" y="43.299999"></rect>

<rect fill="#fff" height="48" id="svg_4" onmouseover="toggle_visibility('groupFour')" onmouseout="setTimeout(toggle_hidden('groupFour'), 2000)" stroke="#000" stroke-width="1.5" width="92" x="348.5" y="41.299999"></rect> 

<rect fill="#fff" height="138" id="svg_5" onmouseover="toggle_visibility('groupFive')" onmouseout="setTimeout(toggle_hidden('groupFive'), 2000)" stroke="#000" stroke-width="1.5" width="72" x="242.5" y="113.299999"></rect>

<rect fill="#fff" height="66" id="svg_6" onmouseover="toggle_visibility('groupSix')" onmouseout="setTimeout(toggle_hidden('groupSix'), 2000)" stroke="#000" stroke-width="1.5" width="84" x="372.5" y="193.299999"></rect> </g> 
</svg>

标记部分2（隐藏或显示的项目）：

<ul class="hide" id="groupOne">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

<ul class="hide" id="groupTwo">
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>

<ul class="hide" id="groupThree">
    <li>List item 7</li>
    <li>List item 8</li>
    <li>List item 9</li>
</ul>

<ul class="hide" id="groupFour">
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
</ul>

<ul class="hide" id="groupFive">
    <li>List item 13</li>
    <li>List item 14</li>
    <li>List item 15</li>
</ul>

<ul class="hide" id="groupSix">
    <li>List item 16</li>
    <li>List item 17</li>
    <li>List item 18</li>
</ul>

js：

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.classList.contains('hide')) {
            e.classList.add('show');
            e.classList.remove('hide');
        } else {
            e.classList.add('hide');
        }

    }

    function toggle_hidden(id) {
        var e = document.getElementById(id);
        if (e.classList.contains('show')) {
            e.classList.add('hide');
        }            
    }
</script>

提前感谢我就如何解决这个问题提出任何建设性意见。

Answer 1

您未在2秒内将toggle_hidden传递给setTimeout，而是立即调用。

onmouseout="setTimeout(function(){ toggle_hidden('groupOne'); }, 2000)"

Answer 2

您正在立即调用函数toggle_hidden，而不是传递引用。

您可以使用bind将参数绑定到它。所以改变：

toggle_hidden('groupTwo')

为：

toggle_hidden.bind(null, 'groupTwo')

...等

setTimeout不起作用

2 个答案: