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">

<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" >区域

</div>
</li>

</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>

</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>

</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>

</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>

</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>

</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>

</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>

</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>

</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>

</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>

</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>

})
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的二级下拉菜单的更多相关文章

纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
flash滚动图片遮住二级下拉菜单解决方法
如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...
Excel应用----制作二级下拉菜单【转】
应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...
CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
dede调用二级下拉菜单方法
<div id="menu"> <ul> {dede:channelartlist typeid='top' row='6' orderby='s ...
jquery 只有二级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js二级下拉菜单
看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...
js实现网站导航的二级下拉菜单
http://www.codesky.net/article/201109/1200js/%E5%AE%9E%E7%94%A8%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95. ...

随机推荐

P4219 [BJOI2014]大融合（LCT）
P4219 [BJOI2014]大融合对于每个询问$(u,v)$所求的是 ($u$的虚边子树大小+1)*($v$的虚边子树大小+1) 于是我们再开个$si[i]$数组表示$i$的虚边子树大小,维护一 ...
Mysql安装错误:Install/Remove of the Service Denied!解决办法
Mysql安装错误:Install/Remove of the Service Denied!解决办法在windos 的cmd下安装mysql 在mysql的bin目录下面执行: mysqld -- ...
NLTK 知识整理
NLTK 知识整理 nltk.corpus模块自带语料 NLTK comes with many corpora, toy grammars, trained models, etc. A compl ...
Linux模拟僵尸进程并kill
模拟系统有僵尸进程后怎么解决僵尸进程 #include <stdio.h> #include <sys/types.h> int main() { //fork a chil ...
关于VS2013下制作和使用静态库和动态库
关于VS2013下制作和使用静态库和动态库引言什么是库:库是写好的现有的,成熟的,可以复用的代码. 所谓静态.动态是指链接.将一个程序编译成可执行程序的步骤: 静态库在链接阶段,会将汇编生成的目标 ...
【python010-数组】
1.创建列表 *创建普通列表 >>> member = ['尘封','破冰','python']>>> member['尘封', '破冰', 'python'] * ...
Windows Installation
If you're running on Windows it is good to run Jenkins as a service so it starts up automatically wi ...
C Primer Plus 创建友好的输入界面笔记
看代码 char inputFunCode; while(inputFunCode = getchar()){ '){ printf("you choose string conn\n&qu ...
Module controller in JMeter
https://qualibrate.com/blog/quality-assurance/jmeter-module-controller/ 通过组合Test Fragments 和Module C ...
Optical Flow related Tutorials
Optical Flow related Tutorials 2017-04-01 10:50:55 Reference: 1. http://blog.csdn.net/carson2005/art ...

boostrapt的二级下拉菜单

boostrapt的二级下拉菜单的更多相关文章

随机推荐

热门专题