接下拉菜单那一篇:

加上点击其它位置,下拉菜单消失。

纯js写法:

 window.document.addEventListener('click', function(e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && elem.id == 'xianshi' ) {
return;
}
elem = elem.parentNode;
}
var s = document.getElementsByClassName("xiang");
for(i=0;i<s.length;i++)
  {
s[i].style.display = "none";
  }
//点击的不是div或其子元素
});

点击其它位置,div下拉菜单消失的更多相关文章

  1. jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单

    jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...

  2. 【android开发】使用PopupWindow实现页面点击顶部弹出下拉菜单

    没有太多花样,也没有很复杂的技术,就是简单的PopupWindow的使用,可以实现点击弹出一个自定义的view,view里可以随便设计,常用的可以放一个listview. demo中我只是一个点击展示 ...

  3. div模拟dropdownlist控件 div下拉菜单

    原文发布时间为:2009-10-16 -- 来源于本人的百度文章 [由搬家工具导入] 控件发布:div2dropdownlist(div模拟dropdownlist控件) div3dropdownli ...

  4. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

  5. 【JavaScript 11—应用总结】:下拉菜单

    导读:在web页面的显示中,总是免不了下拉菜单的设置.怎样将菜单设置的更好玩一点呢?这次,就将实现一个下拉菜单的制作.当鼠标移入的时候,菜单显示,鼠标移走,菜单关闭. 一.实现分析 首先,制作一个下拉 ...

  6. js模拟下拉菜单-键盘、鼠标(代码详解)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Dropdown 下拉菜单

    将动作或菜单折叠到下拉菜单中. 基础用法 移动到下拉菜单上,展开更多操作. 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.默认情况下,下拉按钮只要ho ...

  8. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

随机推荐

  1. 剑指offer:构建乘积数组

    题目描述: 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1]. ...

  2. EF 调试跟踪生成的SQL语句

    IQueryable query = from x in appEntities select x; var sql = ((System.Data.Objects.ObjectQuery)query ...

  3. Netty Socket编程

    工程结构图 一.Socket服务端 1.创建MyServer 类 public class MyServer { public static void main(String[] args) thro ...

  4. MySQL实现按天分组统计,提供完整日期列表,无数据自动补0

    业务需求最近要在系统中加个统计功能,要求是按指定日期范围里按天分组统计数据量,并且要能够查看该时间段内每天的数据量. 解决思路直接按数据表日期字段group by统计,发现如果某天没数据,该日期是不出 ...

  5. Python 图片Resize.py

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 19-7-14 下午4:54 # @Author : RongT import cv2 ...

  6. JavaScript之 BOM 与 DOM

    1. JavaScript 组成 2. DOM.DOCUMENT.BOM.WINDOW 区别 DOM 是为了操作文档出现的 API , document 是其的一个对象:BOM 是为了操作浏览器出现的 ...

  7. [LeetCode] 170. Two Sum III - Data structure design 两数之和之三 - 数据结构设计

    Design and implement a TwoSum class. It should support the following operations:add and find. add - ...

  8. Python Tkinter 文本框(Entry)

    Python Tkinter 文本框用来让用户输入一行文本字符串. 你如果需要输入多行文本,可以使用 Text 组件. 你如果需要显示一行或多行文本且不允许用户修改,你可以使用 Label 组件. 语 ...

  9. 12 Cookie、Session和JSP基础

    1.会话技术 (1)会话概念:一次会话中包含多次请求和响应.一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 (2)会话功能:在一次会话的范围内的多次请求间,共享数据 (3)会 ...

  10. Java8 时间日期类操作

    Java8 时间日期类操作 Java8的时间类有两个重要的特性 线程安全 不可变类,返回的都是新的对象 显然,该特性解决了原来java.util.Date类与SimpleDateFormat线程不安全 ...