Question

我正在尝试使用jquery在悬停时使用简单的幻灯片或滑动动画创建一个简单的show子菜单。

当我有＃menu1和＃menu2时它工作正常。但是代码中有重复。

如何在不重复代码的情况下让sub1和sub2上下滑动？

我还想以橙色显示sub1和sub2，以蓝色显示下拉列表。但是，现在所有都显示为蓝色。

谢谢。

我的代码：

<style type="text/css">
ul{
list-style-type:none;
margin:0;
padding:0;
background-color:#FF9900;
}
li {float:left;
display:block;
width:120px;
text-align:center;
padding:4px;
color:#FFFFFF;
background-color:#33CCFF;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#menu1").hover(
        function(){//onmouseover
            $("#menu1 ul").slideDown();
        },
        function(){//onmouseout
            $("#menu1 ul").slideUp();
        });
     $("#menu2").hover(
        function(){//onmouseover
            $("#menu2 ul").slideDown();
        },
        function(){//onmouseout
            $("#menu2 ul").slideUp();
        });
});
</script>
</head>

<body>
<ul id="menu">
    <li id="menu1">Sub 1
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
    <li id="menu2">Sub 2
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
</ul>       
</body>
</html>

Answer 1

$("#menu1,#menu2").hover(
        function(){//onmouseover
            $(this).children("ul").slideDown();
        },
        function(){//onmouseout
            $(this).children("ul").slideUp();
    });

Answer 2

我的最终解决方案是来自css:background-color for main menu sub1 and sub2 not displaying的Ankit的帮助和指导。谢谢大家！

<style type="text/css">
* {color:#ffffff;}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{float:left;
display:block;
width:120px;
text-align:center;
}

ul > li{background-color:#0000ff;}

ul > li > ul > li{background-color:#ff7700;}


</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#menu1,#menu2").children("ul").hide(); //hides the lists when documents loads


    $("#menu1,#menu2").hover( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(); 
    }); 
});
</script>
</head>

<body>
<ul id="menu">
    <li id="menu1">Sub 1
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
    <li id="menu2">Sub 2
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
</ul>       
</body>

jquery：水平导航栏菜单上的滑动和滑动

2 个答案: