Bootstrap响应式二级导航菜单：悬停展开实现

📝 本文基于作者实际开发经验，解决了 Bootstrap 导航菜单二级菜单无法悬停展开的问题。

这次碰到的需求是响应式二级导航窗格，默认的导航窗格只有点击下拉框的二级窗格，会有如下问题：一级菜单无法添加超链接，二级菜单展示要多点一下。

实现目标： 1.滑动到指定区域，展示二级菜单。 2.一级菜单和二级菜单都可以进行连接跳转。

1.核心代码CSS#

首先是css样式，其实就是让二级菜单在悬停（hover）的时候展示，这里我踩了个坑就是要指定到li样式，【.nav-list】中的【.】表示子类继承，而【>li】中的【>】表示指定子类样式，dropdown-menu就是我li的class名称。

1
.nav-list .navbar-nav>li:hover .dropdown-menu {
2
    display: block;
3
}

ps：浏览器的缓存会造成，建议开发者右键检查关闭浏览器缓存

2.核心代码js#

除了css实现悬停弹出二级菜单，还要让一级菜单可以点击，如果不加入js代码一级菜单将无法点击。

1
    let sUserAgent = navigator.userAgent.toLowerCase();
2
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
3
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
4
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
5
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
6
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
7
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
8
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
9
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
10

11
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
12
        // alert("当前是电脑打开");
13
        $(document).ready(function () {
14
            $(document).off('click.bs.dropdown.data-api');
15
        });
16
    }

3.完整代码#

注释介绍了用到的class的用途，需要注意的就是css和js为核心，别指定错class否则无法使用

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
8
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
9
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
10
<style>
11
    .nav-list .navbar-nav > li:hover .response {
12
        display: block;
13
    }
14
</style>
15
<body>
16
<!--navbar-fixed-bottom设置导航条组件固定在底部，默认顶部navbar-fixed-top-->
17
<div class="collapse navbar-collapse nav-list" id="probootstrap-menu">
18
    <!--navbar-default默认主题，navbar-inverse黑色主题-->
19
    <nav class="navbar navbar-default">
20
        <!--container-fluid设置宽度充满父元素，即为100%-->
21
        <div class="container-fluid">
22
            <!-- navbar-header主要指定div元素为导航条组件包裹品牌图标及切换按钮 -->
23
            <div class="navbar-header">
24
                <!--navbar-toggle 设置button元素为导航条组件的切换钮-->
25
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
26
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
27
                </button>
28
                <!--class="navbar-brand" 一般放品牌logo-->
29
                <span class="navbar-brand glyphicon glyphicon-star " aria-hidden="true"/>
30
            </div>
31

32
            <!-- 导航条的body -->
33
            <!--collapse设置button元素为在视口小于768px时才显示-->
34
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
35
                <!--navbar-nav设置ul为导航条组件内的列表元素;-->
36
                <ul class="nav navbar-nav">
37
                    <!--第一个导航窗格-->
38
                    <!--active选中后的样式-->
39
                    <li class="active"><a href="#">激活 <span class="sr-only">(current)</span></a></li>
40
                    <!--第二个导航窗格-->
41
                    <!--dropdown表示下拉菜单-->
42
                    <li class="dropdown">
43
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
44
                           aria-expanded="false">下拉二级菜单 <span class="caret"></span></a>
45
                        <ul class="dropdown-menu">
46
                            <li><a href="#">下拉二级菜单1</a></li>
47
                            <!--role="separator"代表标签充当分隔角色无实际效果；divider分割线-->
48
                            <li role="separator" class="divider"></li>
49
                            <li><a href="#">下拉二级菜单2</a></li>
50
                            <li role="separator" class="divider"></li>
51
                            <li><a href="#">下拉二级菜单3</a></li>
52
                            <li role="separator" class="divider"></li>
53
                            <li><a href="#">下拉二级菜单4</a></li>
54
                        </ul>
55
                    </li>
56
                    <!--第三个导航窗格-->
57
                    <li class="dropdown">
58
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
59
                           aria-expanded="false">响应式二级菜单 <span class="caret"></span></a>
60
                        <ul class="dropdown-menu response">
61
                            <li><a href="#">响应二级菜单1</a></li>
62
                            <li><a href="#">响应二级菜单2</a></li>
63
                            <li><a href="#">响应二级菜单3</a></li>
64
                            <li><a href="#">响应二级菜单4</a></li>
65
                        </ul>
66
                    </li>
67
                </ul>
68

69

70
                <!--navbar-form表单；navbar-left左浮动-->
71
                <form class="navbar-form navbar-left">
72
                    <!--form-group调整间距，说白了就是个最佳间距样式-->
73
                    <div class="form-group">
74
                        <!--form-control特定效果：宽度变成了100%，浅灰色（#ccc）的边框，4px的圆角，
75
                        阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
76
                        placeholder的颜色为#999-->
77
                        <input type="text" class="form-control" placeholder="Search">
78
                        <button type="submit" class="btn btn-default">Submit</button>
79
                    </div>
80
                </form>
81
                <ul class="nav navbar-nav navbar-right">
82
                    <li><a href="http://www.baidu.com">百度链接</a></li>
83
                    <li class="dropdown">
84
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
85
                           aria-expanded="false">下拉菜单 <span class="caret"></span></a>
86
                        <ul class="dropdown-menu">
87
                            <li><a href="#">1</a></li>
88
                            <li><a href="#">2</a></li>
89
                            <li><a href="#">3</a></li>
90
                            <li role="separator" class="divider"></li>
91
                            <li><a href="#">4</a></li>
92
                        </ul>
93
                    </li>
94
                </ul>
95
            </div><!-- /.navbar-collapse -->
96
        </div><!-- /.container-fluid -->
97
    </nav>
98
</div>
99
</body>
100
<script>
101
    //判断客户端
102
    let sUserAgent = navigator.userAgent.toLowerCase();
103
    console.log("客户端信息:" + "[" + sUserAgent + "]");
104
    //各种类型客户端枚举
105
    let bIsIpad = sUserAgent.match(/ipad/i) === "ipad";
106
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) === "iphone os";
107
    let bIsMidp = sUserAgent.match(/midp/i) === "midp";
108
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === "rv:1.2.3.4";
109
    let bIsUc = sUserAgent.match(/ucweb/i) === "ucweb";
110
    let bIsAndroid = sUserAgent.match(/android/i) === "android";
111
    let bIsCE = sUserAgent.match(/windows ce/i) === "windows ce";
112
    let bIsWM = sUserAgent.match(/windows mobile/i) === "windows mobile";
113

114
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
115
        //不等于以上枚举判断是电脑
116
        console.log("当前是电脑打开");
117
        $(document).ready(function () {
118
            //取消绑定bootstrap导航窗体的下拉框点击事件
119
            // click.bs表示bootstrap的点击，response表示我要取消的class名称
120
            $(document).off('click.bs.response.data-api');
121
        });
122
    }
123
</script>
124
</html>

1.核心代码CSS#

2.核心代码js#

3.完整代码#

相关推荐#

文章分享

文章目录