0

我正在尝试使用 jquery 创建一个简单的显示子菜单，其中包含简单的上滑或下滑动画悬停。

当我有#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>
4

2 回答 2

3 
$("#menu1,#menu2").hover(
        function(){//onmouseover
            $(this).children("ul").slideDown();
        },
        function(){//onmouseout
            $(this).children("ul").slideUp();
    });
于 2012-07-19T06:47:03.060 回答
0

我在 Ankit 的帮助和css:background-color for main menu sub1 and sub2 not displayed 的指导下的最终解决方案。谢谢你们！

<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>
于 2012-07-20T05:11:36.313 回答