从上面可以看出，两个问题，第一：下拉出现的太快太突然，第二：再点击下一个下拉菜单的时候，上一个不会闭合，针对这两个问题，接下来会一 一解决。

解决下拉太快：

js中有个jquery效果，有一个效果是jquery滑动，slideUp()==>>像上滑动，相反的slideDown（）===>>向下滑动，这个便可以代替，

但是效果是点击a链接，针对a链接下的下拉菜单ul添加这种效果，所以需要先找到这个ul元素。

<script>

//........

var ul = $(this).siblings('ul');//遍历a元素的兄弟元素（限制为ul）

</script>

然后再添加slideUp（），用来点击超链接的时候向上收起菜单，添加slideDown（），用来再次点击的时候向下展开菜单。

代码如下：

<script>
    $(function () {
        $('.submenu>a').click(
            function (e) {
                e.preventDefault();//阻止点击a的默认动作
                var li = $(this).parents('li');
                var ul = $(this).siblings('ul');//遍历a元素的兄弟元素（限制为ul）
                if (li.hasClass('open')){  //假如有open类，移除
                    ul.slideUp();
                   li.removeClass('open')
                }else{ //否则添加open类
                    ul.slideDown();
                    li.addClass('open')
                }
            }
        )
    })
</script>
这样第一个问题我们就解决了。（注意，这里的css样式：   .submenu >ul{display: none;}不能删除，这里的样式所起到的作用有两个，一个是点击的隐藏菜单（这个用slideUp效果代替了，但是他还有一个作用就是在一开始隐藏块元素ul。））

卡顿为制作图片的问题，与效果无关。

从上面可以看出，下拉已经可以不是那么的突兀了，接下来解决第二个问题：只展现一个下拉菜单，多的即隐藏。

这个也是js的任务。要整个导航栏或者面板只展现一个下拉菜单，那么就要针对整个一级目录对象和整个二级目录对象，同样我们要先找到所有的一级、二级目录。

<script>

//........

var li_s = $('#sidebar .submenu');//一级目录
var ul_s = $('#sidebar .submenu >ul');//二级目录

</script>

整个思路是这样的：首先一开始默认所有的li都没有open类，点击一个添加open类，用下滑的方式显示。再点击取消open类，但是当我们点击两个都没有的li的时候，两个li都将添加open类从而显示出来。所有我们在添加open类显示的时候，为了避免污染就需要，统一先把所有的下拉菜单收起来，所有的一级li的open类移除，再为点击的那个链接添加open类。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉</title>
    <style>
        .submenu >ul{
            display: none;
        }
        .open>ul{
            display: block;
        }
    </style>
</head>
<body>
<div id="sidebar">
    <ul>
        <li class="submenu">
            <a>首页</a>
            <ul>
                <li><a>首页内容1</a></li>
                <li><a>首页内容2</a></li>
                <li><a>首页内容3</a></li>
            </ul>
        </li>
        <li>
            <a>内容</a>
        </li>
        <li class="submenu">
            <a>新闻</a>
            <ul >
                <li><a>新闻1</a></li>
                <li><a>新闻2</a></li>
                <li><a>新闻3</a></li>
                <li><a>新闻4</a></li>
                <li><a>新闻5</a></li>
            </ul>
        </li>
    </ul>

</div>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $('.submenu>a').click(
            function (e) {
                e.preventDefault();//阻止点击a的默认动作
                var li = $(this).parents('li');
                var li_s = $('#sidebar .submenu');//所有.submenu的li目录
                var ul_s = $('#sidebar .submenu >ul');//所有.submenu 的下级ul目录
                var ul = $(this).siblings('ul');//遍历a元素的兄弟元素（限制为ul）
                if (li.hasClass('open')){  //假如点击的那个链接有open类，那么下拉菜单向上滑动，移除open类
                    ul.slideUp();
                    li.removeClass('open');
                }else{ //假如点击的那个链接没有open类，首先对所有的下拉菜单都让其收起来。然后点击的那个下拉，所有的li目录移除open类，点击的那个添加open类
                    ul_s.slideUp();
                    ul.slideDown();
                    li_s.removeClass('open')
                    li.addClass('open')
                }
            }
        )
    })
</script>
</body>
</html>
效果图如下：

												


											
有序无序Ul->Li Ol->Li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单(变形2 ---修饰)的更多相关文章
	

    
						
  1. [置顶]        html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口
		
    <a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...
    
		
    2. 
						
  2. ul 、ol li 继承原有样式的问题
		
    如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
    
		
    3. 
								
  3. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里
		
    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
    
		
    4. 
						
  4. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li
		
    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...
    
		
    5. 
						
  5. 有序无序ul->li    ol->li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单
		
    实现这一效果利用css和js技术结合 以ul->li为例子 <!DOCTYPE html><html lang="en"><head> & ...
    
		
    6. 
						
  6. 通过jquery获得某个元素的位置, 透明div, 弹出框,  然后在旁边显示toggle子级联菜单-hover的bug解决
		
    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
    
		
    7. 
						
  7. EditText 默认不获取焦点，弹出软键盘布局变形解决方案
		
    关于弹出软键盘布局变形解决方案: 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan&qu ...
    
		
    8. 
						
  8. 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)
		
    一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...
    
		
    9. 
						
  9. IOS实现弹出菜单效果MenuViewController(背景 景深 弹出菜单)
		
    在写项目时,要实现一个从下移上来的一个弹出菜单,并且背景变深的这么一个效果,在此分享给大家. 主要说一下思路及一些核心代码贴出来,要想下载源码, 请到:http://download.csdn.net ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. msyql 优化之五不要
			
    1.尽量不要有空判断的语句,因为空判断将导致全表扫描,而不是索引扫描. 对于空判断这种情况,可以考虑对这个列创建数据库默认值 //空判断将导致全表扫描 select small_id from sma ...
    
			
    2. 
						
  2. C/C++中的转义字符
			
    在C语言中有三种转义字符,它们是:一般转义字符.八进制转义字符和十六进制转义字符. 1.一般转义字符 这种转义字符,虽然在形式上由两个字符组成,但只代表一个字符.常用的一般转义字符为: \a \n \ ...
    
			
    3. 
						
  3. FJWC2017&FJOI2017一试 游记
			
    day1 ​ 早上是以前泉州七中的杨国烨讲课.(据说当时看新闻说是一对双胞胎一起上thu的其中一个)课题是图论/网络流. ​ 下午第一道一开始推出来了一个之和面积有关的式子,然后觉得可以容斥一发,觉得 ...
    
			
    4. 
						
  4. sh_03_逻辑运算演练
			
    sh_03_逻辑运算演练 # 练习1: 定义一个整数变量 age,编写代码判断年龄是否正确 age = 12 # 要求人的年龄在 0-120 之间 """ 10000 a ...
    
			
    5. 
						
  5. 【Leetcode】二叉树的最小深度
			
    题目: 给定一个二叉树,找出其最小深度. 注意最小深度的定义! 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 一.递归法 时间复杂度:O(n).需要 ...
    
			
    6. 
						
  6. HOG行人目标检测
			
    行人检测是自动驾驶中重要的内容,对于驾驶安全具有重要意义. HOG特征提取: (1)灰度化处理 (2)Gamma变换和梯度计算 (3)Cell划分 (4)Cell组成block,归一化处理 (5)bl ...
    
			
    7. 
						
  7. sqli-labs(9)
			
    基于时间的GET单引号盲注 0x01爱之初试探 在我们注入了SQL代码之后,存在以下两种情况: 如果注入的SQL代码不影响后台[数据库]的正常功能执行,那么Web应用的页面显示正确(原始页面). 如果 ...
    
			
    8. 
						
  8. pymysql 处理数据的几种方式
			
    1.表中提取数据 sql = "SELECT * FROM table WHERE name='%s'AND time='%s'" % (name,time)多个选择条件用AND连 ...
    
			
    9. 
						
  9. vue基于element-ui的三级CheckBox复选框
			
    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...
    
			
    10. 
						
  10. 不能访问windows installer服务
			
    xp系统安装msi类型的安装程序出现以下错误: 不能访问windows installer服务. 解决办法 1:运行cmd -> regsvr32 msi.dll 运行services.msc- ...
    
			
    11.