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

解决下拉太快:

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. ul 、ol li 继承原有样式的问题

    如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...

  3. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  4. 前端 HTML body标签相关内容 常用标签 列表标签 ul,ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  5. 有序无序ul->li ol->li菜单,默认点击当前弹出下拉,再次点击收起下拉菜单

    实现这一效果利用css和js技术结合 以ul->li为例子 <!DOCTYPE html><html lang="en"><head> & ...

  6. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  7. EditText 默认不获取焦点,弹出软键盘布局变形解决方案

    关于弹出软键盘布局变形解决方案: 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan&qu ...

  8. 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)

    一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...

  9. IOS实现弹出菜单效果MenuViewController(背景 景深 弹出菜单)

    在写项目时,要实现一个从下移上来的一个弹出菜单,并且背景变深的这么一个效果,在此分享给大家. 主要说一下思路及一些核心代码贴出来,要想下载源码, 请到:http://download.csdn.net ...

随机推荐

  1. 在 Cloudera Data Flow 上运行你的第一个 Flink 例子

    文档编写目的 Cloudera Data Flow(CDF) 作为 Cloudera 一个独立的产品单元,围绕着实时数据采集,实时数据处理和实时数据分析有多个不同的功能模块,如下图所示: 图中 4 个 ...

  2. 8.django单独执行文件

    import os import django # 导入django os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'noju.settings')d ...

  3. 查看有没有绑这个host

    1.查看有没有绑这个host ping broker.vs.amap.com

  4. VO(值对象) 与PO (持久对象)

    VO ,值对象 (Value Object) , PO ,持久对象 (Persisent Object),它们是由一组属性和属性的 get 和 set 方法组成.从结构上看,它们并没有什么不同的地方. ...

  5. UVa 11212 Editing a Book (IDA* && 状态空间搜索)

    题意:你有一篇n(2≤n≤9)个自然段组成的文章,希望将它们排列成1,2,…,n.可以用Ctrl+X(剪切)和Ctrl+V(粘贴)快捷键来完成任务.每次可以剪切一段连续的自然段,粘贴时按照顺序粘贴.注 ...

  6. java jts

    来自:UCMapForOpenGIS https://bbs.csdn.net/topics/380204896?list=992863 对比 其实geotools就是基于jts开发的,而geoser ...

  7. 在最新的 create-react-app 中添加 less 支持

    前置知识: 把 webpack 的相关配置暴露出来 运行 git add -A 运行 git commit -m 'project init' 运行 yarn eject 然后选 y 项目中多出来两个 ...

  8. 【python 应用之四】提升 Python 运行性能的 7 个习惯

    大家都知道艺赛旗的 RPA 依赖于 python 语言.因此我们可以掌握一些技巧,可尽量提高 Python 程序性能,也可以避免不必要的资源浪费.1.使用局部变量 尽量使用局部变量代替全局变量:便于维 ...

  9. (51)LINUX应用编程和网络编程之六Linux高级IO

    3.6.1.非阻塞IO 3.6.1.1.阻塞与非阻塞 阻塞:阻塞具有很多优势(是linux系统的默认设置),单路IO的时候使用阻塞式IO没有降低CPU的性能 补充:阻塞/非阻塞, 它们是程序在等待消息 ...

  10. 一款基于jQuery的分页插件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...