这篇文章主要介绍了 JS 模拟 bootstrap 下拉菜单效果, 结合完整实例形式分析了 javascript 动态操作页面元素的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/html 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0303/264781.html