bootstrap导航窗格响应式二级菜单

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

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

1.核心代码CSS

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

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

ps：浏览器的缓存会造成，建议开发者右键检查关闭浏览器缓存
在这里插入图片描述

2.核心代码js

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

    let sUserAgent = navigator.userAgent.toLowerCase();
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

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

3.完整代码

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">script>
<style>
    .nav-list .navbar-nav > li:hover .response {
        display: block;
    }
style>
<body>

<div class="collapse navbar-collapse nav-list" id="probootstrap-menu">
    
    <nav class="navbar navbar-default">
        
        <div class="container-fluid">
            
            <div class="navbar-header">
                
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                button>
                
                <span class="navbar-brand glyphicon glyphicon-star " aria-hidden="true"/>
            div>

            
            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                
                <ul class="nav navbar-nav">
                    
                    
                    <li class="active"><a href="#">激活 <span class="sr-only">(current)span>a>li>
                    
                    
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">下拉二级菜单 <span class="caret">span>a>
                        <ul class="dropdown-menu">
                            <li><a href="#">下拉二级菜单1a>li>
                            
                            <li role="separator" class="divider">li>
                            <li><a href="#">下拉二级菜单2a>li>
                            <li role="separator" class="divider">li>
                            <li><a href="#">下拉二级菜单3a>li>
                            <li role="separator" class="divider">li>
                            <li><a href="#">下拉二级菜单4a>li>
                        ul>
                    li>
                    
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">响应式二级菜单 <span class="caret">span>a>
                        <ul class="dropdown-menu response">
                            <li><a href="#">响应二级菜单1a>li>
                            <li><a href="#">响应二级菜单2a>li>
                            <li><a href="#">响应二级菜单3a>li>
                            <li><a href="#">响应二级菜单4a>li>
                        ul>
                    li>
                ul>


                
                <form class="navbar-form navbar-left">
                    
                    <div class="form-group">
                        
                        <input type="text" class="form-control" placeholder="Search">
                        <button type="submit" class="btn btn-default">Submitbutton>
                    div>
                form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://www.baidu.com">百度链接a>li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">下拉菜单 <span class="caret">span>a>
                        <ul class="dropdown-menu">
                            <li><a href="#">1a>li>
                            <li><a href="#">2a>li>
                            <li><a href="#">3a>li>
                            <li role="separator" class="divider">li>
                            <li><a href="#">4a>li>
                        ul>
                    li>
                ul>
            div>
        div>
    nav>
div>
body>
<script>
    //判断客户端
    let sUserAgent = navigator.userAgent.toLowerCase();
    console.log("客户端信息:" + "[" + sUserAgent + "]");
    //各种类型客户端枚举
    let bIsIpad = sUserAgent.match(/ipad/i) === "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) === "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) === "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) === "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) === "android";
    let bIsCE = sUserAgent.match(/windows ce/i) === "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) === "windows mobile";

    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
        //不等于以上枚举判断是电脑
        console.log("当前是电脑打开");
        $(document).ready(function () {
            //取消绑定bootstrap导航窗体的下拉框点击事件
            // click.bs表示bootstrap的点击，response表示我要取消的class名称
            $(document).off('click.bs.response.data-api');
        });
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

相关阅读:
双端口RAM和多模块存储器
 如何选择一款好用的物业管理软件？快鲸物业管理软件是不二之选
 前端 JS 经典：上传文件
 C++之weak_ptr与shared_ptr智能指针实例(一百九十五)
BottomSheetDialogFragment大量踩坑-自适应高度和最大高度和滚动问题等等
 OpenShift 4 - 用 OpenShift DevSpaces 在线开发 Quarkus 云原生应用
 Flask+Echarts搭建全国疫情可视化大屏
 【numpy】np.digitize(arr, bins) 用法
 汇编语言课程设计1 代码优化版
 栈和队列的练习题
原文地址：https://blog.csdn.net/weixin_43487532/article/details/127917083