JQuery

最新推荐文章于 2022-04-28 10:33:03 发布

亮靓-Demi

最新推荐文章于 2022-04-28 10:33:03 发布

阅读量192

点赞数

分类专栏：前端-angular

本文链接：https://blog.csdn.net/lyj4495673/article/details/80833461

版权

前端-angular 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.基础

页面中的菜单项可以通过嵌套的ul和li来表示
浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。
list-style属性值为none时，可以清除ul和li前面的圆点
清除紫菜点的缩进值，需要padding和margin都为0
可以用background-repeat来控制北京图的重复填充方式

<body>
   <ul>
      <li class="nain"><a href="#">菜单项3</a>
         <ul>
             <li><a href="#">子菜单项1</a></li>
             <li><a href="#">子菜单项2</a></li>
         </ul>
      </li>
   </ul>            
</body>

ul{
    /*清除子菜单缩进值*/
    padding: 0;
    margin: 0;
}

display的值为none可以用于隐藏元素
.main a和.main > a的不同之处，前者选择了.main的这个class的元素内部的所有a节点，后者只选择.main的子节点中的a节点
show,hide方法可以用于显示或隐藏元素。
toggle方法可以省去判断元素是显示还是隐藏的状态，直接显示隐藏的元素，直接将显示的元素隐藏
slideToggle和toggle达到的效果类似

2.实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>菜单</title>
        <meta http-equiv="content-type" content="text/html; charset-utf-8" />
        <link type="text/css" rel="stylesheet" href="css/menu.css" />
        <script type="text/javascript" src="js/menu.js"></script>
        <script type="text/javascript" src="js/menu.js"></script>
    </head>
    <body>
        <ul>
            <li class="nain">
                <a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单项1</a></li>                  
                </ul>
            </li>
            <li class="nain"><a href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单项1</a></li>
                    <li><a href="#">子菜单项2</a></li>                  
                </ul>
            </li>
            <li class="nain"><a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单项1</a></li>
                    <li><a href="#">子菜单项2</a></li>
                    <li><a href="#">子菜单项3</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

ul,li{
    /*清楚文本前圆点*/
    list-style: none;
}
ul{
    /*清除子菜单缩进值*/
    padding: 0;
    margin: 0;
}
.nain{
    background-image: url(../img/1.jpg);
    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;
}
.nain a{
    color: white;
}
.nain li a{
    color:black;
}
.nain ul{
    display: none;
}

$(document).ready(function(){
    //页面中的dom已经装载完成时，执行代码
    $(".nain > a").click(function(){
        //找到对应主菜单项对应的子菜单项
        var ulNode=$(this).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();
        //ulNode.slideUp;
    });
})

3.结果

这里写图片描述

4.小结

大概就是这样啦，比JavaScript写的少点，目前就看出这点端倪。

亮靓-Demi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
19
评论
JQuery

1.基础页面中的菜单项可以通过嵌套的ul和li来表示浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。list-style属性值为none时，可以清除ul和li前面的圆点清除紫菜点的缩进值，需要padding和margin都为0可以用background-repeat来控制北京图的重复填充方式&lt;body&gt; &lt;ul&gt; ...
复制链接

扫一扫

专栏目录