이번에 만난 요구 사항은 반응형 보조 탐색 창입니다.기본 탐색 창은 드롭다운 상자의 보조 창만 클릭하면 됩니다.다음과 같은 문제가 있을 것입니다: 첫 번째 수준 메뉴는 하이퍼링크를 추가할 수 없으며 두 번째 레벨 메뉴가 더 많은 지점에서 한 번 표시되어야 합니다.
목표 달성:
1. 지정된 영역으로 스와이프하여 보조 메뉴를 표시합니다.
2. 1단계 메뉴와 2단계 메뉴 모두 연결 점프를 수행할 수 있습니다.
1. 핵심 코드 CSS
첫 번째는 css 스타일입니다.사실 호버링(hover) 시 보조 메뉴를 표시하는 것입니다.여기서는 리 스타일을 지정하기 위해 피트를 밟았습니다.[.nav-list]의 [.]는 하위 클래스 상속을 의미합니다. [>li:hover]의 [>]는 지정된 하위 클래스 스타일을 나타내며 드롭다운 메뉴는 내 li의 클래스 이름입니다.
.nav-list .navbar-nav>li:hover .dropdown-menu {
display: block;
}
추신: 브라우저의 캐시가 원인이 됩니다. 개발자는 브라우저 캐시를 확인하고 닫으려면 개발자가 마우스 오른쪽 버튼을 클릭하는 것이 좋습니다.
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');
});
}
3. 완전한 코드
주석은 사용된 클래스의 목적을 소개합니다. css와 js가 핵심이라는 점에 유의해야 합니다. 잘못된 클래스를 지정하지 않으면 작동하지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>
<style>
.nav-list .navbar-nav > li:hover .response {
display: block;
}
</style>
<body>
<!--navbar-fixed-bottom设置导航条组件固定在底部，默认顶部navbar-fixed-top-->
<div class="collapse navbar-collapse nav-list" id="probootstrap-menu">
<!--navbar-default默认主题，navbar-inverse黑色主题-->
<nav class="navbar navbar-default">
<!--container-fluid设置宽度充满父元素，即为100%-->
<div class="container-fluid">
<!-- navbar-header主要指定div元素为导航条组件包裹品牌图标及切换按钮 -->
<div class="navbar-header">
<!--navbar-toggle 设置button元素为导航条组件的切换钮-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</button>
<!--class="navbar-brand" 一般放品牌logo-->
<span class="navbar-brand glyphicon glyphicon-star " aria-hidden="true"/>
</div>
<!-- 导航条的body -->
<!--collapse设置button元素为在视口小于768px时才显示-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--navbar-nav设置ul为导航条组件内的列表元素;-->
<ul class="nav navbar-nav">
<!--第一个导航窗格-->
<!--active选中后的样式-->
<li class="active"><a href="#">激活 <span class="sr-only">(current)</span></a></li>
<!--第二个导航窗格-->
<!--dropdown表示下拉菜单-->
<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="#">下拉二级菜单1</a></li>
<!--role="separator"代表标签充当分隔角色无实际效果；divider分割线-->
<li role="separator" class="divider"></li>
<li><a href="#">下拉二级菜单2</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">下拉二级菜单3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">下拉二级菜单4</a></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="#">响应二级菜单1</a></li>
<li><a href="#">响应二级菜单2</a></li>
<li><a href="#">响应二级菜单3</a></li>
<li><a href="#">响应二级菜单4</a></li>
</ul>
</li>
</ul>
<!--navbar-form表单；navbar-left左浮动-->
<form class="navbar-form navbar-left">
<!--form-group调整间距，说白了就是个最佳间距样式-->
<div class="form-group">
<!--form-control特定效果：宽度变成了100%，浅灰色（#ccc）的边框，4px的圆角，
阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
placeholder的颜色为#999-->
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</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="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">4</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</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>