js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子，先看看效果：
html代码：
<nav>
<span class="nav_logo"></span>
<h1>云蚂客首页</h1>
<button class="nav_btn"></button>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">联系客服</a></li>
</ul>
</nav>
js函数代码及调用：
//构建函数：菜单显示隐藏js方法
var btnAndMenu=function(options) {
/*
btnObj:菜单按钮的ID
menuId：菜单的ID
type：是否组织默认事件冒泡（1：点击外部菜单会隐藏；0：点击外部菜单不会隐藏，只有点击按钮才行）。
*/
var objSetting={btnObj:'#menu_btn1',menuObj:'#menu1',type:1};
if (options){$.extend(objSetting,options)}; var btnObj = $(objSetting.btnObj);
var menuObj = $(objSetting.menuObj);
var type = objSetting.type;
btnObj.click(function(event){
if(menuObj.is(':hidden')){
menuObj.show();
}else{
menuObj.hide();
}
event.stopPropagation();//阻止事件向上冒泡
}); if(type=1){
$(document).on("click", function () {//对document绑定一个影藏Div方法
menuObj.hide();
});
menuObj.on('click',function(event){
event.stopPropagation();//阻止事件向上冒泡
});
}
}; //菜单显示隐藏控制
btnAndMenu({btnObj:'.nav_btn',menuObj:'.menu',type:1});
js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div的更多相关文章
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框
- jquery点击添加样式，再点击取出样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- radio点击一下选中，再点击恢复未选状态
radio点击一下选中,再点击恢复未选状态 实现方式1: <input type="radio" id="cat" name="ca ...
- js构建函数优秀案例
这几个效果函数是看到别人写的,挺好的,复制下来学习备用! 函数封装: //var _hmt = _hmt || [];(function() {var hm = document.createElem ...
- JQ 点击指定文本框显示div。点击其他区域隐藏DIV
<input id="username" type="text" style="width:90%;margin-top: 40px;" ...
- 2.3点击菜单显示div再点击就隐藏
事件:onclick 属性:display 利用if语句实现 <!DOCTYPE html><html><head><meta charset="u ...
- Js-Html 前端系列--点击非Div区域隐藏Div
最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...
- 点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题
帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题! ...
随机推荐
- MYSQL 主从复制---简单易学
本帖最后由 传说中的草包 于 2017-4-12 09:12 编辑为什么要用mysql主从复制? 这个问题不需要回答吧,,,,,想想,一个人干活快呢,还是一万个能性格功力一样的人干活快呢. 不用解释大 ...
- 站在 Android 开发的角度，聊聊 Airbnb 的 Lottie！！！
一.前言 你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画.但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时 ...
- oracle和mysql几点差异对比
Oracle与mysql差异性总结 之前有个项目是用oracle数据库进行开发,需要把数据库改成mysql,遇到了一些地方需要注意的,就简单记了下来. 备注: 再把oracle转成mysql的时候,表 ...
- 以css伪类为基础,引发的选择器讨论 [新手向]
作为第一篇技术干货,来写哪个方面的内容,我着实考虑了很久. 经过了整整30秒的深思熟虑,我决定就我第一次发现新大陆一样的内容,来进行一次讨论. 伪类:伪类对元素进行分类是基于特征(characteri ...
- 异步编程Async/await关键字
异步编程Async \await 关键字在各编程语言中的发展(出现)纪实. 时间 语言版本 2012.08.15 C#5.0(VS2012) 2015.09.13 Python 3.5 2016.03 ...
- em标签和strong标签的区别
今天模拟面试,第一个问题就是这个,然后我回答说就是表示强调,然后老师说还有吗,我说不知道了,然后,就没有然后了... 第一个层次的区别: <em>标签是告诉浏览器把其中的文本表示为强调的内 ...
- Android binder学习一：主要概念
要看得懂android代码,首先要了解binder机制.binder机制也是android里面比較难以理解的一块,这里记录一下binder的重要概念以及实现.作为备忘. 部分内容来源于网上,如有侵权. ...
- 基于lucene.net 和ICTCLAS2014的站内搜索的实现1
Lucene.net是一个搜索引擎的框架,它自身并不能实现搜索.须要我们自己在当中实现索引的建立,索引的查找.全部这些都是依据它自身提供的API来实现.Lucene.net本身是基于java的,可是经 ...
- iOS_4_表情排列
终于效果图: BeyondViewController.h // // BeyondViewController.h // 04_表情排列 // // Created by beyond on 14- ...
- 近期对FTP及Excel数据处理的一些摸索
一个多月没写随笔了,主要是发的东西,自己感觉也很垃圾,说又说回来,谁不是从垃圾变强的,所以不比比,还得努力.come on!! Python学习也有段时间了,近期为了解决同事的一个难题,所以我们决定联 ...