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事件问题! ...
随机推荐
- Servlet&JSP-HTTP报文头获取及应用
完整代码请参考:https://github.com/devway9/java-exercise/tree/master/servlet-jsp 目录 1 HttpServletRequest获取报文 ...
- dp资源分配问题
noip考试中dp中的资源分配问题是一大重点(不定时更新) 以下是一些例题 1.乘积最大 //Gang #include<iostream> #include<cstring> ...
- video视频铺满
1. 因项目需求,要在公司官网加一段视频,达到的效果是视频平铺整个网页,大小随网页变化:网上找了许久才找了了这么一个生僻的属性,只需给video加这么个样式就可以了:object-fit: fill; ...
- HDU1541--Stars(树状数组)
Stars Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...
- 深入理解javascript函数进阶系列第一篇——高阶函数
前面的话 前面的函数系列中介绍了函数的基础用法.从本文开始,将介绍javascript函数进阶系列,本文将详细介绍高阶函数 定义 高阶函数(higher-order function)指操作函数的函数 ...
- mshta 反弹shell
kali系统准备: 复制以下ruby代码到/usr/share/metasploit-framework/modules/exploits/windows/smb/msh_shell.rb目录(要注意 ...
- GIL(全局解释器锁)
引入 现在绝大部分的Python都是CPython解释器(但不是必须使用CPython解释器),而CPython的一个特性就是有GIL,作用保证解释器级别的代码在运行时不被其他的线程进行修改,即加锁处 ...
- Postgres的tuple的组装
1.相关的数据类型 我们先看相关的数据类型: HeapTupleData(src/include/access/htup.h) typedef struct HeapTupleData { uint3 ...
- 设计模式 - 装饰者模式(Decorator Pattern) 具体解释
装饰者模式(Decorator Pattern) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26707033 装饰者 ...
- Windows Azure系列-- 配置Azure Power Shell
1.下载Azure Power shell https://azure.microsoft.com/en-us/documentation/articles/powershell-install-co ...