JQuery动画学习——菜单应用

最新推荐文章于 2022-05-07 15:40:14 发布

grandir

最新推荐文章于 2022-05-07 15:40:14 发布

阅读量183

点赞数

文章标签： JQuery动画——菜单应用

本文链接：https://blog.csdn.net/weixin_44738940/article/details/102674593

版权

JQuery动画学习——菜单应用

一个前端菜鸟，把上课学到的基础整理出来，欢迎大家给出意见。

功能要求：默认显示第一个菜单的二级菜单，点击每一个一级菜单时，将其他二级菜单收起，并显示当前对应的二级菜单。
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
        <title>menu</title>
        <style type="text/css">  
          .mainleftFAQ {   
                width: 150px;   
            }   
            .admintext11 {
                padding: 8px 10px;
                cursor: pointer;
                position: relative;
                margin:1px;
                font-weight:bold;
                background: #93cdff;
                font-family: "华文楷体";
                font-size: 20px;
            }   
            .FAQlist {
                display:none;
                font-family: "新宋体";
                font-size: 14px;
            }   
            .FAQlist a    
            {   
                padding:8px 0px;   
                display:block;   
                color:#006699;   
                background-color:#EFEFEF;   
                padding-left:10px;   
                font-weight:bold;   
                text-decoration:none;   
            }   
            .FAQlist a:hover {   
                color:#7fb2f4;   
                background-color:#dfdfdf;   
                text-decoration:none;   
            }   
        </style>  
       <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function() {
	//$(".FAQlist").hide()将二级菜单设置为不可见
	//.first()获取当前选择器的第一个元素相当于eq(0)	
	//.first().show()菜单初始化，默认第一个菜单的二级菜单默认显示
		   $(".FAQlist").hide().first().show();
    //点击响应菜单点击事件
                 $(".bartitleFAQ").click(function() {
                  $(".FAQlist").hide(100);//将二级菜单全部隐藏
                  $(this).next().show(100);//显示当前一级菜单相应的二级菜单$(this).当前点击的jQuery对象,next()获取紧邻的同辈元素
                 })
                });
        </script> 
    </head>
    <body> 
        <div class="mainleftFAQ"> 
            <div class="bartitleFAQ"><p class="admintext11">服务管理</p></div> 
            <div class="FAQlist"> 
                <a href='#'> 等待提交</a> 
                <a href='#' title=''> 等待发布</a>
            </div> 
            <div class="bartitleFAQ"><p class="admintext11">更新流程</p></div> 
            <div class="FAQlist"> 
                <a href='#'> 后台搜索</a>
                <a href='#'> 更新流程</a>
            </div> 
            <div class="bartitleFAQ"><p class="admintext11">下载管理</p></div> 
            <div class="FAQlist"> 
                <a href='#'> 下载</a>
            </div> 
        </div>     
    </body> 
</html>

grandir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery动画学习——菜单应用

JQuery动画学习——菜单应用一个前端菜鸟，把上课学到的基础整理出来，欢迎大家给出意见。功能要求：默认显示第一个菜单的二级菜单，点击每一个一级菜单时，将其他二级菜单收起，并显示当前对应的二级菜单。实现代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫