JS模拟bootstrap下拉菜单效果实例

本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考,具体如下:

模拟bootstrap下拉菜单

在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的“下拉菜单”

由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果

当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢?

起初的想法,给body绑定一个onclick事件,当点击空白的地方由于事件冒泡,触发click body的事件,但是问题来了,点击控件的时候,同样会触发body的click事件,导致下拉菜单显示出来之后,有被收缩回去了,因此这个思路不正确

由于bootstrap已经实现了这个功能,查看其源代码,找到了解决思路:
给document绑定事件(隐藏其子菜单),当触发控件的方法时则阻止其冒泡,不让其触发绑定

<!-- 筛选导航栏 -->
<div class="border_b_bottom_3eee text-center width_40 float_left active" style="z-index: 999">
  <div class="margin_bottom_10 margin_top_10 ">
    <span onclick="showOrHideItem(this,event)" class="title">
      分类
      <span class="caret"></span>
    </span>
    <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee sqh_position_top_100 sqh_position_left_0 display_none" data-show="hide" style="z-index: 999;">
      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left">家政</span>
        <span class="float_right icon iconfont sqh_line_height_15"></span>
        <span class="clearfix"></span>
      </li>
      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left">蔬菜</span>
        <span class="float_right icon iconfont sqh_line_height_15"></span>
        <span class="clearfix"></span>
      </li>
      <li class=" margin_left_10 margin_right_10 sqh_pointer sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left">零食</span>
        <span class="float_right icon iconfont sqh_line_height_15"></span>
        <span class="clearfix"></span>
      </li>
    </ul>
  </div>
</div>
<div class="text-center border_b_bottom_3eee width_40 float_left">
  <div class="margin_bottom_10 margin_top_10 border_b_right_eee">
    <span onclick="showOrHideItem(this,event)" class="title">
      分类
      <span class="caret"></span>
    </span>
    <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee" data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none">
      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left">家政1</span>
        <span class="float_right icon iconfont sqh_line_height_15"></span>
        <span class="clearfix"></span>
      </li>
      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left">蔬菜1</span>
        <span class="float_right icon iconfont sqh_line_height_15"></span>
        <span class="clearfix"></span>
      </li>
      <li class=" margin_left_10 margin_right_10 sqh_pointer" onclick="jumpTo(this)" target="https://www.baidu.com">
        <span class="float_left">零食1</span>
        <span class="float_right icon iconfont sqh_line_height_15"></span>
        <span class="clearfix"></span>
      </li>
    </ul>
  </div>
</div>
<div class="text-right border_b_bottom_3eee text-center width_20 float_left">
  <div class="margin_bottom_10 margin_top_10" onclick="showSearch(this,event)">
    <span class="icon iconfont font_14 display_block padding_left_5"></span>
  </div>
  <!-- 显示搜索框 -->
  <div class=" sqh_tmp_bj_ff">
    <div class="sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff search_cont" style="top:58%;right: 0px;z-index: 999;display: none;" data-search="hide">
      <div class="margin_left_15 ">
        <div class="sqh_relative" style="margin-right: 80px;">
          <span class="icon iconfont font_14 sqh_absolute padding_left_5" style="left: 0px;top:0px;"></span>
          <input class="in_search all_width padding_left_30 sqh_tmp_bj_f3 sqh_border_radius_20" placeholder="搜索" onclick="stopEvent(this,event)" type="text" value="">
        </div>
        <div class="float_right" style="width: 80px;">
          <button type="button" class="btn btn-e4005a" style="padding: 4px 12px;">搜索</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(function(){
  //给document绑定事件
  $(document).on("click",function(){
    //找到控件是ul并且包含属性data-show="show"的控件,如果有,则让其隐藏起来
    $("ul[data-show='show']").slideUp("slow");
  });
  $(document).on("click",function(){
    //找到控件是div并且包含属性data-show="show"的控件,如果有,则修改其css属性。
    $("div[data-search='show']").css("display","none").css("width","32%");
  });
});
//显示或关闭筛选条件
function showOrHideItem(obj,event){
// alert(arguments.callee);
// alert(showOrHideItem.caller);
  var $currentObj = $(obj);
  //隐藏所有的下拉列表
  $("ul[data-show='show']").hide();
  //清除所有active类
  $currentObj.closest(".row").find("div.active").removeClass("active");
  //给当前div添加选中样式
  $currentObj.closest(".float_left").addClass("active")
  var $ul = $currentObj.closest("div").find("ul");
  //ul是展开状态
  if($ul.data("show") == "show"){
    $ul.slideUp("slow");
    $ul.attr("data-show","hide");
  }else{
    //ul是展开状态
    $ul.slideDown("slow");
    $ul.attr("data-show","show");
    //阻止事件冒泡
    event.stopPropagation();
  }
}
//展示搜索框
function showSearch(obj,event){
  var $currentObj = $(obj).closest(".float_left").find(".search_cont").css("display","block");
  $currentObj.animate({
    width: "100%"
  }, 1000 );
  $currentObj.attr("data-search","show");
  //阻止事件冒泡
  event.stopPropagation();
}
function stopEvent(obj,event){
  //阻止事件冒泡
  event.stopPropagation();
}
</script>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2016-06-14

js代码实现下拉菜单【推荐】

效果: js代码: <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName("ul")[0] ;//获取 subMenu.style.display = " block "; } function HideSub(li) { var subMenu = li.getElementsByTagNa

纯css下拉菜单 无需js

再来个今天某人说过的例子:纯css下拉菜单: 效果图 这个的实现很简单,主要是:hover和过渡属性transition的使用. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size

javascript手风琴下拉菜单实现代码

手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

JS组件Bootstrap实现下拉菜单效果代码

Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

全国省市二级联动下拉菜单 js版

本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&

使用Javascript实现选择下拉菜单互移并排序

本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码. 代码如下: <html> <head> <title>使用Javascript实现选择下拉菜单互移并排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <

JS+CSS实现的经典圆角下拉菜单效果代码

本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

基于JavaScript实现单选框下拉菜单添加文件效果

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

JavaScript实现下拉菜单的显示和隐藏

我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获

最简单js代码实现select二级联动下拉菜单

本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

JS 实现导航菜单中的二级下拉菜单的几种方式

最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用. 如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin

JS中用三种方式实现导航菜单中的二级下拉菜单

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

js实现简洁大方的二级下拉菜单效果代码

本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果看上去相当实用,下拉导航菜单也是大家比较常用的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/

js+css实现超简洁的二级下拉菜单效果代码

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

jquery实现平滑的二级下拉菜单效果

本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>

jquery实现漂亮的二级下拉菜单代码

本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht

jQuery实现的精美平滑二级下拉菜单效果代码

本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

jquery实现鼠标滑过显示二级下拉菜单效果

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

jQuery实现灰蓝风格标准二级下拉菜单效果代码

本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo