jquery：水平导航栏菜单上的向下滑动和向上滑动答案

【问题标题】：jquery: slidedown and slideup on horizontal navigation bar menujquery：水平导航栏菜单上的向下滑动和向上滑动
【发布时间】：2012-07-19 06:43:59
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： jquery menu slidedown slideup navigationbar

【解决方案1】：

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

【讨论】：

是的，这行得通。谢谢你。但是，我无法以橙色显示 sub1 和 sub2。所有都显示为蓝色（sub1、sub2 和列表）。
所有都显示为蓝色。如果您注意到 css 代码，我会尝试将 sub1 和 sub2 显示为橙色，并将列表项显示为蓝色。
现在都显示为橙色。
抱歉，现在一切正常。我在另一个问题中找到了解决方案。

【解决方案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>

【讨论】：