jquery经典实例之左侧菜单

最新推荐文章于 2024-05-19 20:04:08 发布

编程界小明哥

最新推荐文章于 2024-05-19 20:04:08 发布

阅读量669

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/dkm123456/article/details/110817310

版权

jquery 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>Title</title>
    <style>
       .menu_2 {
			margin-left:1px;
			display:none;
		}
		li {
			list-style:none;
		}
		.menu_2 li,.menu_1 {
			display:block;
			text-align:center;
			font-size:10px;
			background-color:#09f;
			color:#ffffff;
			line-height:25px;
			height:25px;
			width:160px;
			margin:3px;
		}
		a:link,a:visited,a:hover,a:active {
			text-decoration:none;
		}
    </style>
</head>
<body>
	   <div class="outer">
      <ul>
        <li>
            <a href="#" class="menu_1">一级菜单1</a>
            <ul class="menu_2">
                <li>二级菜单1-1</li>
                <li>二级菜单1-2</li>
                <li>二级菜单1-3</li>
            </ul>
        </li>
        
        <li>
            <a href="#" class="menu_1">一级菜单2</a>
            <ul class="menu_2">
                <li>二级菜单2—1</li>
                <li>二级菜单2—2</li>
                <li>二级菜单2—3</li>
            </ul>
        </li>
        
        <li>
            <a href="#" class="menu_1">一级菜单3</a>
            <ul class="menu_2">
                <li>二级菜单3-1</li>
                <li>二级菜单3-2</li>
                <li>二级菜单3-3</li>
            </ul>
        </li>
      </ul>
   </div>
    <script src="jquery-1.5.1.js"></script>
    <script>
   	 $(document).ready(function(){
   	 		$(".menu_1").click(function(){
   	 			 $(this).next().show(600);
   	 			 $(this).parent().siblings().children('ul').hide(600);
   	 			})
   	 	});
    </script>
</body>
</html>

效果图：

编程界小明哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery经典实例之左侧菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <title>Title</title> <style> .menu_2 { margin-left:1px; display:none; } li { list-style:none; } .menu_2 li,.menu_1 {.
复制链接

扫一扫