boostrapt的二级下拉菜单
Posted 郑福坤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了boostrapt的二级下拉菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="x-rim-auto-match" content="none">
<!--网页描述-->
<meta name="description" content="hello">
<!-- 视图 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!--关键字,“，”分隔-->
<meta name="keywords" content="a,b,c">
<!--用来防止别人在框架里调用你的页面-->
<meta http-equiv="Window-target" content="_top">
<title>淘狗网</title>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="public/plugins/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="public/plugins/font-awesome/css/font-awesome.min.css">
<!-- Swiper‘s CSS -->
<link rel="stylesheet" href="public/plugins/swiper/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="public/plugins/app/css/public.css"/>
<link rel="stylesheet" type="text/css" href="public/plugins/app/css/selectDog.css"/>
</head>
<body>
<div class="wrapper-selectDog">
<!--头部开始-->
<header>
<div class="center">
<div class="row">
<a class="logo col-xs-3" href="javascript:void(0);"><img src="public/upload/app/detail/images/detail_03.png"/></a>
<label class="col-xs-6 text-center"><img src="public/upload/app/detail/images/detail_06.gif" /><input type="text" name="" id="" placeholder=" 搜宠物 找店铺" /></label>
<ul class="col-xs-3 clearfix header-right">
<li class="fr"><a href="javascript:void(0);">发布</a></li>
<li class="fr borderMid"><a href="javascript:void(0);">|</a></li>
<li class="fr"><a href="javascript:void(0);">我的</a></li>
</ul>
</div>
</div>
</header>
<!--内容部分-->
<section>
<ol class="breadcrumb title">
<li><a href="#">首页</a></li>
<li class="active">狗狗挑选</li>
</ol>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div id="myexample">
<ul class="nav navbar-nav clearfix">
<li class="dropdown fl" id="province">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">区域
<b class="caret"></b>
</a>
<!--<a href="#" class="dropdown-toggle" >区域
<b class="caret"></b>
</a>-->
<ul class="dropdown-menu" id="er">
<li>
<a id="001" href="javascript:void(0);"class="selectCity">北京</a>
<div class="city">
<p>海淀</p>
<p>朝阳</p>
<p>丰台</p>
</div>
</li>
<li>
<a id="002" class="selectCity">天津</a>
<div class="city" style="display: none;">
<p>南市区</p>
<p>北市区</p>
<p>新市区</p>
</div>
</li>
<li>
<a id="003" class="selectCity">上海</a>
<div class="city" style="display: none;">
<p>虹桥</p>
<p>浦东区</p>
</div>
</li>
<li>
<a id="004" class="selectCity">重庆</a>
<div class="city" style="display: none;">
<p>重庆西</p>
<p>重庆东</p>
</div>
</li>
</ul>
</li>
<li class="dropdown fl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">犬种
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a id="action-1" href="#">八哥</a>
</li>
<li>
<a href="#">拉布拉多</a>
</li>
<li>
<a href="#">京巴</a>
</li>
<li class="divider"></li>
<li>
<a href="#">藏敖</a>
</li>
</ul>
</li>
<li class="dropdown fl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">价格
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a id="action-1" href="#">1000以下</a>
</li>
<li>
<a href="#">1000-2000</a>
</li>
<li>
<a href="#">2000-3000</a>
</li>
<li>
<a href="#">3000以上</a>
</li>
</ul>
</li>
<li class="dropdown fl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">更多
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a id="action-1" href="#">更多二级</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="Advertisement">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="public/upload/app/selectDog/selectDog_02.png"/></div>
<div class="swiper-slide"><img src="public/upload/app/selectDog/selectDog_02.png"/></div>
<div class="swiper-slide"><img src="public/upload/app/selectDog/selectDog_02.png"/></div>
<div class="swiper-slide"><img src="public/upload/app/selectDog/selectDog_02.png"/></div>
</div>
</div>
</div>
<div>
<div class="borderBtom" >
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_04.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fr" href="javascript:void(0);" style="color: #f35709;"><img src="public/upload/app/protect.png"/></a>
</div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_04.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fr" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/protect.png"/></a>
</div>
</div>
</div>
</div>
<p class="btn"><a href="javascript:void(0);">进入淘狗商城官方保障专区>></a></p>
<p class="tuiguang">精准推广 >></p>
<div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a> </div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a>
</div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a> </div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a>
</div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a> </div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a>
</div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a> </div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a>
</div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a> </div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a>
</div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a> </div>
</div>
</div>
<div class="borderBtom">
<div class="center clearfix">
<div class="leftImg fl">
<figure><a href="javascript:void(0);"><img src="public/upload/app/selectDog/selectDog_12.png"/></a></figure>
</div>
<div class="rightT fr clearfix">
<ul>
<li><a href="javascript:void(0);">纯种蓝眼小哈士奇品相好保证健康</a></li>
</ul>
<p><span>3针疫苗</span>/<span>1次驱虫</span>/<span>血统级</span></p>
<p><span style="color: #FF0000;font-weight: 600;">2500.00<sub style="color: #333;">元</sub></span>/只</p>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/detail/images/detail_15.gif"/></a>
<a class="fl cer" href="javascript:;" style="color: #f35709;"><img src="public/upload/app/selectDog/selectDog_15.png"/></a>
</div>
</div>
</div>
</div>
</section>
<footer>
<ul class="pagination">
<li class="disabled"><a href="javasctipt:void(0);">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">»</a></li>
</ul>
</footer>
</div>
<script src="public/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Swiper JS -->
<script src="public/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Swiper JS -->
<script src="public/plugins/swiper/js/swiper.min.js"></script>
<script>
$(function(){
var banner = new Swiper(‘.swiper-container‘, {
autoplay:2000,
});
//调用下拉菜单
$(‘.dropdown-toggle‘).dropdown();
//下拉菜单出现时触发
$(‘#myDropdown‘).on(‘show.bs.dropdown‘, function () {
})
var pro = ‘‘;
var city = ‘‘;
$("#province *").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(".city").css("display","none");
return false;
});
//
$(".selectCity").on("click",function(){
pro = $(this).text();
//所有的二级先消失
$(".city").css("display","none");
$("#province .dropdown-toggle").attr("aria-expanded",true);
//当前的二级显示
$(this).parent("li").find("div").css("display","block");
})
//
$(".city p").on("click",function(){
$(".dropdown").removeClass("open").find(".dropdown-toggle").attr("aria-expanded", false);
$(".city").css("display","none");
city = $(this).text();
alert(pro+‘:‘+city);
})
});
</script>
</body>
</html>
以上是关于boostrapt的二级下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章