1

我正在尝试创建一个 JavaScript（最好不是 jQuery btw）网站菜单，当每个菜单项悬停时，它会下拉子链接的下拉菜单。我几乎拥有它的全部功能，但我遇到了一些困难，无法在线找到解决方案。

在菜单按钮上，我有一个 onmouseover 事件，用于显示子链接面板并为其设置动画。如果您将鼠标移出/放在另一个菜单按钮上，面板将消失，如果您将鼠标悬停在另一个菜单按钮上，则会出现一个新的。问题是，当您将鼠标从所需的菜单按钮移动到相应的面板上时，它会消失，显然是因为菜单按钮上有一个 onmouseout 事件可以做到这一点！我需要按钮上的 onmouseout，但是当鼠标移到面板上时，如何防止它触发隐藏功能？

我试图想办法解决这个问题，但到目前为止我失败了，所以任何帮助将不胜感激！

谢谢，

安迪

<script type="text/javascript">

    var anim = new Animator();

    function Animator() {

        this.slideDown = function (element, height) {

            var e = document.getElementById(element);
            var counter = 0;
            e.style.display = 'block';

            var interval = window.setInterval(function () {
                counter += 2;
                e.style.height = counter + 'px';

                if (counter >= height) {
                    clearInterval(interval);
                }
            }, 1);

        };

        this.hideSlide = function (element) {
            var e = document.getElementById(element);
            e.style.display = 'none';
            e.style.height = 0 + 'px';
        }
    }

</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divMenuBar">
    <div class="menuButton" onmouseover="anim.slideDown('divMenu1', 305);" onmouseout="anim.hideSlide('divMenu1');">Click Me</div>
    <div id="divMenu1" class="slidingMenu menu1">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
    <div class="menuButton" onmouseover="anim.slideDown('divMenu2', 305);" onmouseout="anim.hideSlide('divMenu2');">Click Me</div>
    <div id="divMenu2" class="slidingMenu menu2">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
    <div class="menuButton" onmouseover="anim.slideDown('divMenu3', 305);" onmouseout="anim.hideSlide('divMenu3');">Click Me</div>
    <div id="divMenu3" class="slidingMenu menu3">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
    <div class="menuButton" onmouseover="anim.slideDown('divMenu4', 305);" onmouseout="anim.hideSlide('divMenu4');">Click Me</div>
    <div id="divMenu4" class="slidingMenu menu4">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li class="end">Option 6</li>
        </ul>
    </div>
</div>
</form>

4

1 回答 1

0

我相信你有你不想使用 jQuery（或其他 UI 框架）的理由，所以我不会推动这个问题。但总的来说，您必须编写类似于这些框架如何处理菜单的代码。

与其像现在一样在 mouseout 上盲目地隐藏元素，而是需要构建逻辑来查看鼠标现在在什么位置，如果它在子面板上，它需要保持面板的可见性。如果您开始进入子菜单，这可能会变得相当棘手。

但是不管你怎么写，这里没有免费的午餐。您的按钮和菜单面板需要相互了解以及它们之间的关系。您必须明确决定隐藏和显示什么以及何时显示。

于 2013-01-28T16:52:57.773 回答