JQuery【下拉菜单】

最新推荐文章于 2023-10-06 22:18:06 发布

一直在冬眠

最新推荐文章于 2023-10-06 22:18:06 发布

阅读量687

点赞数

分类专栏： JavaScript/JQuery 文章标签： jquery class function url css

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865228

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS代码：
<style type="text/css">
ul, li {
 /*清除ul和li上默认的小圆点*/
 list-style: none;
}
ul {
 /*清除子菜单的缩进值*/
 padding: 0;
 margin: 0;
}
.main {
 background-image: url(images/title.gif);
 background-repeat: repeat-x;
 width: 120px;
}
li {
 background-color: #EEEEEE;
}
a {
 /*取消所有的下划线*/
 text-decoration: none;
 padding-left: 20px;
 display: block;
 display: inline-block;
 width: 100px;
 padding-top: 3px;
 padding-bottom: 3px;
}
.main a{
 color: white;
 background-image: url(images/collapsed.gif);
 background-repeat: no-repeat;
 background-position: 3px center;
}
.main li a{
 color: black;
 background-image: none;
}
.main ul {
 display: none;
}
</style>

JQuery代码：
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //页面中的DOM已经装载完成时，执行的代码
    $(".main > a").click(function() {
        //找到主菜单项对应的子菜单项
        var ulNode = $(this).next("ul");
        /*
        if (ulNode.css("display") == "none") {
        ulNode.css("display","block");
        } else {
        ulNode.css("display","none");
        }
        */
        //ulNode.show("slow");//normal fast
        //ulNode.hide();
        //ulNode.toggle();
        //
        //ulNode.slideDown("slow");
        //ulNode.slideUp;
        ulNode.slideToggle();
        changeIcon($(this));
    });
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
    if (mainNode) {
        if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
            mainNode.css("background-image", "url('images/expanded.gif')");
        } else {
            mainNode.css("background-image", "url('images/collapsed.gif')");
        }
    }
}
</script>

HTML代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
</head>
<body>
<ul>
            <li class="main"><a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单项1_1</a></li>
                    <li><a href="#">子菜单项1_2</a></li>
                    <li><a href="#">子菜单项1_3</a></li>
                </ul>
            </li>
            <li class="main"><a href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单项2_1</a></li>
                    <li><a href="#">子菜单项2_2</a></li>
                    <li><a href="#">子菜单项2_3</a></li>
                </ul>
            </li>
            <li class="main"><a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单项3_1</a></li>
                    <li><a href="#">子菜单项3_2</a></li>
                    <li><a href="#">子菜单项3_3</a></li>
                </ul>
            </li>
        </ul>
</body>
</html>

一直在冬眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery【下拉菜单】

CSS代码：ul, li { /*清除ul和li上默认的小圆点*/ list-style: none;}ul { /*清除子菜单的缩进值*/ padding: 0; margin: 0;}.main { background-image: url(images/title.gif); background-repeat: repeat-x; width: 120px;
复制链接

扫一扫