JQuery实现菜单

最新推荐文章于 2021-02-05 23:47:05 发布

Chenchen-

最新推荐文章于 2021-02-05 23:47:05 发布

阅读量852

点赞数

分类专栏： ------Web ------JQuery

本文链接：https://blog.csdn.net/u010191034/article/details/43156209

版权

------Web 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

------JQuery

1 篇文章 0 订阅

订阅专栏

最近一直没写博客、今天开个头

如图

JQuery的目的就是用让编程人员写更少的代码、实现更多的功能。

HTML代码

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>chenchenMake</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/editTable.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>
    <link href="../../css/StyleSheet1.css" rel="stylesheet" />
    <script type="text/javascript" src="../../Scripts/JavaScript2.js"></script>

</head>
<body>
 
    <ul>
        <li class="main">
            <a href="#">菜单项1</a>
            <ul>
                <li><a href="#">菜单项1</a>  </li>
                <li><a href="#">菜单项1</a>  </li>
                <li><a href="#">菜单项1</a>  </li>
     
            </ul>
        </li>
        <li class="main">
            <a href="#">菜单项2</a>
            <ul>
                <li><a href="#">菜单项1</a>  </li>
                <li><a href="#">菜单项1</a>  </li>
                <li><a href="#">菜单项1</a>  </li>
            </ul>
        </li>
        <li class="main">
            <a href="#">菜单项3</a>
            <ul>
                <li><a href="#">菜单项1</a>  </li>
                <li><a href="#">菜单项1</a>  </li>
                <li><a href="#">菜单项1</a>  </li>
            </ul>
        </li>
    </ul>
</body>
</html>
</span>

JQ代码

<span style="font-size:18px;">$(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(300);
        //ulNode.hide(300);
        //ulNode.toggle(300);
        //ulNode.slideDown();
        ulNode.slideToggle("fast");

       
    })
})</span>

CSS代码

<span style="font-size:18px;">ul, li {
    list-style:none;

}
ul {
    padding:0;
    margin:0;

}
.main {
    background-color:#3e3e42;
    background-repeat:repeat-x;
    width:120px;
}
li {
     background-color:#808080;
}
a {
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a {
    color:white;
}
.main li a {
    color:black;
}
.main ul {
    display:none;

}</span>

最近过的挺飘的…………………………………………

————————————————————chenchen————————————————————————

Chenchen-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
15
评论
JQuery实现菜单

$(document).ready(function () { //页面DOM装在完成时候 $(".main > a").click(function () { var ulNode = $(this).next("ul"); //if (ulNode.css("display") == "none") { // ulNode.
复制链接

扫一扫

专栏目录