3

ユーザーがjQueryを使用して順序付けられていないリストメニューにカーソルを合わせると、滑らかなフェードイン/フェードアウト効果を作成しようとしています。これまでのところ、ユーザーがサブアイテムを含むメニューアイテムにカーソルを合わせると、サブメニューをフェードインできますが、苦労しています。それを隠すために。

要件は次のとおりです。マウスがサブメニュー項目の上にない場合、またはその親である場合は、サブメニューリストをフェードアウトします。

メニューのスクリーンショットとHTMLマークアップを含めていますが、上記の要件に従ってメニューを非表示にする方法を提案してください。

メニュー

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home</title>
    <link href="Styles/Style.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {

            $('#subList').css("display", "none");

            $('#item3').mouseover(function () {
                $('#subList').fadeIn('slow');
                $('#subList').css("display", "block");
            });

            $('#subItem1').mouseover(function () {
                $('#subList').css("display", "block");
            });

            $('#subItem2').mouseover(function () {
                $('#subList').css("display", "block");
            });

            $("#subItem1").mouseleave(function () {
                $("#subList").fadeOut("slow");
            });

            $('#subItem2').mouseleave(function () {
                $('#subList').fadeOut("slow");
            });
        });
    </script>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="item4.htm">Menu Item 4</a></li>
            <li><a href="#" id="item3">Menu Item3</a>
                <ul id="subList">
                    <li id="subItem1"><a href="subItem1.htm">Sub Item 1</a></li>
                    <li id="subItem2"><a href="subItem2.htm">Sub Item 2</a></li>
                </ul>
            </li>
            <li><a href="item2.htm">Menu Item 2</a></li>
            <li><a href="item1.htm">Menu Item 1</a></li>
        </ul>
    </div>
</body>
</html>
4

3 に答える 3

7

このスクリプトを試してください：

$(function(){
    $(".menu ul li").hover(function(){
             $(this).children("ul").stop().fadeIn("slow");
       },
       function(){
             $(this).children("ul").stop().fadeOut("slow");   
    })
})

http://jsfiddle.net/2yEtK/1/

于 2012-04-25T05:42:53.070 に答える
1

このスクリプトを試してください：

 jQuery(document).ready(function () {

        $('#subList').css("display", "none");

        $('#item3').parent().hover(function () {
            $('#subList').fadeIn('slow');
            $('#subList').show();
        },
            function(){
                $('#subList').fadeOut('slow');
                $('#subList').hide();
        }
        );
    });

ここにJSFiddleリンクがあります：http： //jsfiddle.net/scQ9W/1/

slideDown（）およびslideUp（）を使用することもできます。このリンクを参照してください：http： //jsfiddle.net/scQ9W/2/

いくつかのcssを適用した後：http： //jsfiddle.net/scQ9W/3/

于 2012-04-25T05:43:05.933 に答える
0

$（ "＃subItem1 / subItem2"）。mouseleaveをスキップして...を使用します。

$('#subList').mouseleave(function () {
   $(this).fadeOut("slow");
});

代わりは？

于 2012-04-25T05:46:32.703 に答える