Question

我有一个超级简单的JS菜单，目前所有项目都会淡出＆＃34; Turf＆＃34; ＆＃34;台与＃34; ＆＃34;器件＆＃34;

任何人都可以想到FadeIn的方法＆＃34; Turf＆＃34;而Benches and Devices马上出现了???

谢谢！丹

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


        <style>

            *                                   { margin: 0; padding: 0; }
body                                { font: 14px Helvetica, Sans-Serif; } 
#page-wrap                          { width: 800px; margin: 25px auto; } 
a                                   { text-decoration: none; }
ul                                  { list-style: none; }
p                                   { margin: 15px 0; }

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover                 { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
                                      color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #f39673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }
/* 

    LEVEL TWO
*/
ul.dropdown ul                      { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                   { font-weight: normal; background: #f6f6f6; color: #000; 
                                      border-bottom: 1px solid #ccc; float: none; }

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul                   { left: 100%; top: 0; }
ul.dropdown li:hover > ul           { visibility: visible; }
        </style>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

        <script type="text/javascript">

            $(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");

        //$('ul:first',this).css('visibility', 'visible').hide().fadeIn(1000);
        $('li',this).css('visibility', 'visible').hide().fadeIn(3000);
        console.log("test");

    }, function(){

        $(this).removeClass("hover");
        //$('ul:first',this).css('visibility', 'hidden');
        $('li',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});



        </script>
</head>

<body>

    <div id="page-wrap">


        <ul class="dropdown">
            <li><a href="#">For Facilities</a>
                <ul class="sub_menu">
                     <li><a href="#">Turf</a></li>
                     <li><a href="#">Benches</a></li>
                     <li><a href="#">Devices</a></li>

                </ul>
            </li>

        </ul>

    </div>

</body>

</html>

Javascript下拉菜单：淡入特定行，显示所有其他行

0 个答案: