1

UNオーダーリストタグとjqueryを使ってメニューを作成しています

<style type="text/css">
    ul
    {
        font-family: Arial, Verdana;
        font-size: 10px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    ul#menu > li
    {
        display: block;
        position: relative;
        float: left;
        display: inline;
        list-style-type: none;
    }
    ul#menu li ul
    {
        display: none;
        position: absolute;
    }
    ul li a
    {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #2C5463;
        margin-left: 1px;
        white-space: nowrap;
        text-align: center;
    }

    ul li a:hover
    {
        background: #617F8A;
    }
    /* ul li:hover ul
    {
        display: block;
        position: absolute;
        text-align: center;
    }
    li:hover li
    {
        font-size: 13px;
    }*/
    li:hover a
    {
        background: #617F8A;
    }
    li:hover li a:hover
    {
        background: #2C5463;
    }
</style>

これは私が使用したjqueryプラグインのリンクです

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

これはjqueryコードです

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu li").mouseover(function () {
            $(".submenu").stop().slideDown();
        });
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    }); 
</script>

ここにhtmlがあります

<div id="linkbar">
    <ul id="menu">
        <li style="margin-left: 2px;"><a href="#">Home</a></li>
        <li><a href="#">About Us</a> </li>
        <li><a href="services.html">Services</a>
            <ul class="submenu">
                <li><a href="trademarks.html" >Trademarks</a></li>
                <li><a href="Patents.html" >Patents</a></li>
                <li><a href="copyright.html">Copy Right</a></li>
                <li><a href="design registration.html" >Design Registration</a></li>
                <li><a href="iso9001.html">ISO 9001</a></li>
                <li><a href="roc.html">Company Formation</a></li>
                <li><a href="importexpertcode.html">Import Export Code</a></li>
                <li><a href="shop establishment.html">Shop Extablishment</a></li>
                <li><a href="tax Duties.html">Tax- Duties</a></li>
                <li><a href="patnershipworks.html">Partnership Works</a></li>
            </ul>
        </li>
        <li><a href="contactus.html">Contact us</a> </li>
        <li><a href="application status.html">Application Status</a></li>
    </ul>
</div>

マウスをulメニューに合わせると子メニューが表示されますが、マウスアウトすると子ulが非表示になりません! 何が問題なのですか 助けてください

簡単なjqueryメニューをダウンロードするウェブサイトがあれば教えてください

4

2 に答える 2

4

問題は、mouseoutドキュメントの準備ができているときに関数#menuをバインドしていないため、イベント ハンドラーをバインドするときに存在しないことです。

$(document).ready(function () {
    $("#menu li").mouseover(function () {
        $(".submenu").stop().slideDown();
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    }); 
});

コードが機能していることを示す jsFiddle を次に示します。これは、あなたが提出したコードを含むものです。

まったく使用しない別の方法にも注目する価値があり$(document).ready()ます。<script>要素を要素の下部に配置すると、イベントbodyを待つ必要はありません。readyしたがって、以下も機能します。

<!-- at the end of the body element -->
    <script>
        $("#menu li").mouseover(function () {
            $(".submenu").stop().slideDown();
        });

        $("#menu").mouseout(function () {
            $(".submenu").hide();
        }); 
    </script>
</body>
于 2013-11-07T13:06:15.730 に答える
0

.hover()を使用

デモ

$(document).ready(function () {
    $("#menu li:has('ul')").hover(function () {
        $(".submenu").stop().slideDown();
    }, function () {
        $(".submenu").hide();
    });
});

また

デモ

$(document).ready(function () {
    $("#menu li").hover(function () {
        $(".submenu").stop().slideDown();
    }, function () {
        $(".submenu").hide();
    });
});
于 2013-11-07T13:04:25.737 に答える