1

各メニュー項目にカーソルを合わせるとサブリンクのドロップダウンを表示するJavaScript（jQuery btwではないことが望ましい）Webサイトメニューを作成しようとしています。私はほぼ完全に機能していますが、少し壁にぶつかり、オンラインで解決策を見つけることができません。

メニューボタンには、サブリンクパネルを表示およびアニメーション化するマウスオーバーイベントがあります。別のメニューボタンにマウスを合わせるとパネルが消え、別のメニューボタンにカーソルを合わせると新しいパネルが表示されます。問題は、マウスを目的のメニューボタンからそれぞれのパネルに移動すると、マウスが消えることです。これは、メニューボタンにマウスアウトイベントがあり、それを実行するためです。ボタンにオンマウスアウトが必要ですが、マウスがパネル上を移動したときに非表示機能が起動しないようにするにはどうすればよいですか？

私はこれを回避する方法を考えようとしましたが、これまで失敗したので、どんな助けでも大歓迎です！

ありがとう、

アンディ

<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 に答える