在鼠标悬停时显示子菜单 [英] Displaying sub menus on mouse over

问题描述

大家好，

我有一个悬停菜单，该菜单会在鼠标悬停在树视图的每个节点上显示.一切正常.我要做的是在鼠标悬停在菜单项上的情况下显示子菜单.

以下是代码:

在HTML中:

Hi All,

I have got a hover menu that is getting displayed on mouse over of every node of a treeview. This is working fine. What i want to do is to display sub menus on mouse over of the menu items.

Following is the code:

In HTML:

<div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;">
        <table bgcolor="#0000FF">
            <tr><td><font color="#FFFFFF">Option 1</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 2</td></tr>
            <tr><td><font color="#FFFFFF"><a id="Option3" onmouseout="showhide('SubHover',false,'Option3');" onmouseover="showhide('SubHover',true,'Option3');">Option 3</a></font></td></tr>
            <tr><td bgcolor="#8888FF">Option 4</td></tr>
            <tr><td><font color="#FFFFFF">Option 5</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 6</td></tr>
        </table>
    </div>
    <div id="SubHover" style="visibility:hidden; position:absolute; top:0; left:0;">
        <table>
            <tr><td bgcolor="gray">Option 3.1</td></tr>
            <tr><td bgcolor="#ffffff">Option 3.2</td></tr>
            <tr><td bgcolor="gray">Option 3.3</td></tr>
            <tr><td bgcolor="#ffffff">Option 3.4</td></tr>
        </table>
    </div>

用Java语言编写:

In Javascript:

//#############New Code###############
        var menuArray = new Array();
        menuArray[0] = 'hoverpopup';
        //menuArray[1] = 'submenu2';
        var globalObject = '';
        var isActive = false;
        var ourTimer;

        function showhide(obj,onlink,arg)
        {
            targetObject = document.getElementById(obj).style;

            globalObject = targetObject;
            if(onlink)
            {
                clearTimeout(ourTimer);

                for (i=0; i < menuArray.length; i++)
                {
                    var tempObject = document.getElementById(menuArray[i]).style;
                    tempObject.visibility = "hidden";
                }

                targetObject.visibility = 'visible';
                targetObject.position = "absolute";
                targetObject.top = getPosition(event).y;
                targetObject.left = getPosition(event).x;
                isActive = true;
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }

        function layerTimer()
        {
            ourTimer = setTimeout("hideMenu()",0750);
        }

        function hideMenu()
        {
            if( !isActive )
            {
                globalObject.visibility = 'hidden';
            }
        }

        function layerCheck(flag)
        {
            if(flag)
            {
                isActive = true;
                clearTimeout(ourTimer);
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }
        window.onload = function()
        {
            for(var i=0;i<menuArray.length;i++)
            {
                var id = menuArray[i];
                var e = document.getElementById(id);
                e.onmouseover = function(e)
                {
                    layerCheck(true);
                }
                e.onmouseout = function(e)
                {
                    layerCheck(false);
                }
            }
        }
        //############################

这里的问题是，一旦我将鼠标悬停在选项3上，子菜单就会出现，但主菜单却消失了，这可能是由于Mouseout事件造成的.

有人可以告诉我，如何在鼠标悬停时显示子菜单的同时维护主菜单?
最好的问候，
Snigdharani Behera

The problem here is, as soon as i mouse over on option 3, the sub menus appear, but the main menu disappears, because of the Mouseout event probably.

Can somebody tell me, how do i maintain the main menu, while displaying the sub menu on mouseover???

Best Regards,
Snigdharani Behera

推荐答案

我有一些想法很喜欢.

1)
使用setTimeout(''onmouseout0''，1000);并具有一个公共变量来管理菜单(如果子菜单显示为true
) 然后在onmouseout0上检查变量，如果子菜单没有显示，请调用onmouseout的主要功能.

2)为每个菜单使用父div容器而不是使用mouseout

I have some ideas enjoy them.

1)
use setTimeout(''onmouseout0'', 1000); and have a public variable to manage your menus if the sub menu appears true the variable
then on onmouseout0 check the variable if the sub menu doesn''t apper so call the main function of onmouseout.

2) use parent div container instead of use mouseout for each menu

这篇关于在鼠标悬停时显示子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！