今天写了两个类似天猫商城的弹框，先上图，上代码，再说明：
案例一：
html:
<!-- search-bar {{{ --> <div> <ul> <li> <input type="text" value="美特斯邦威" title="在您选择的条件下搜索" id="filter-search-keyword"> </li> <li> <div id="filter-cats"> <span>所有分类</span> <ul> <li><a href="#">所有分类</a></li> <li><a href="#">精品男装</a></li> <li><a href="#">品牌女装</a></li> <li><a href="#">睡衣/家居服/浴袍</a></li> <li><a href="#">内衣/塑身/袜品/文胸</a></li> <li><a href="#">箱包皮具</a></li> <li><a href="#">休闲</a></li> <li><a href="#">品牌特卖</a></li> <li><a href="#">时尚女鞋</a></li> <li><a href="#">流行男鞋</a></li> <li><a href="#">童装/童鞋/亲子装</a></li> <li><a href="#">服饰配件/皮带/帽子/围巾</a></li> </ul> </div> </li> </ul> <b> <input type="submit" id="j-keybtn" value="搜索"> </b> </div> <!-- }}} --> |
css:
/* search-bar {{{ */ .search-bar { float: left; position: relative; width: 255px; z-index: 2; } .search-bar ul { background-color: #F7F7F7; border: 1px solid #CCCCCC; float: left; } .search-bar .search-menu { background-position: 56px -52px; cursor: pointer; } .search-bar .search-menu { border-color: #E1E1E1; border-style: none none none solid; border-width: 0 0 0 1px; color: #999999; line-height: 22px; padding: 0 16px 0 5px; position: relative; width: 51px; z-index: 1111; } .search-bar .search-menu span { display: block; overflow: hidden; white-space: nowrap; width: 50px; } .search-bar .search-menu .sub-menu { background-color: #FFFFFF; border: 1px solid #91A8B4; display: none; height: 220px; left: -1px; overflow-x: hidden; overflow-y: scroll; position: absolute; top: 23px; width: 160px; } .search-bar .selected .sub-menu { display: block; } .search-bar .sub-menu li { float: none; } .search-bar .sub-menu a { display: block; width: auto; } .search-bar .search-menu a { color: #666666; display: inline-block; padding: 3px 0 3px 10px; width: 150px; } .search-bar .sub-menu .even a { background-color: #F2F2F2; } .search-bar .sub-menu a:hover { background-color: #D5E2FF; color: #666666; text-decoration: none; } .search-bar .key-word input { background-color: #FFFFFF; border: 0 none; color: #666666; display: block; height: 20px; line-height: 20px; overflow: hidden; padding-left: 4px; width: 125px; } .search-bar li { float: left; } .search-bar .search-menu { background: url('../images/base/icon.png') no-repeat -888px -182px; } .btn-search-wrap { border: 1px solid #CCCCCC; float: left; height: 22px; margin-left: -1px; overflow: hidden; } .btn-search { background: -moz-linear-gradient(#FFFFFF, #E5E5E5) repeat scroll 0 0 transparent; border: 0 none; color: #333333; cursor: pointer; height: 22px; line-height: 22px; overflow: hidden; width: 50px; } /* }}} */ |
js:
$(document).ready(function() { //判断当前元素是否是被筛选元素的子元素或者本身 $.fn.isChildAndSelfOf = function(b) { return (this.closest(b).length > 0); }; $('.search-menu').toggle(function() {/* 点击所有分类 {{{ */ $('.sub-menu').show(); //第一次点击 弹框显示 $(document).click(function(event) { if(!$(event.target).isChildAndSelfOf('#filter-cats')) // 除了点击的id = filter-cats元素及其子元素之外的元素，弹框就隐藏 $('.sub-menu').hide(); return false; }); }, function(){ if($('.sub-menu').is(':visible')) $('.sub-menu').hide(); else $('.sub-menu').show(); //第二次点击元素的时候，判断弹窗是显示还是隐藏的，如果是显示的则隐藏，反之则显示 });/* }}} */ }); |
案例二：
html:
<!-- location {{{ --> <div id="filter-location"> <span><b> 所在地 </b></span> <div> <ul> <li><a href="">所有地区</a></li> </ul> <ul> <li><a href="">江浙沪</a></li> <li><a href="">珠三角</a></li> <li><a href="">港澳台</a></li> <li><a href="">海外</a></li> <li><a href="">北京</a></li> <li><a href="">上海</a></li> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> </ul> <div> <form action=""> <input type="text" name="loc" id="filter-city" value="请输入城市名"> <button type="submit">确定</button> </form> </div> <ul> <li><a href="">杭州</a></li> <li><a href="">温州</a></li> <li><a href="">宁波</a></li> <li><a href="">南京</a></li> <li><a href="">苏州</a></li> <li><a href="">济南</a></li> <li><a href="">青岛</a></li> </ul> <ul> <li><a href="">安徽</a></li> <li><a href="">福建</a></li> <li><a href="">甘肃</a></li> <li><a href="">广东</a></li> <li><a href="">广西</a></li> <li><a href="">贵州</a></li> <li><a href="">海南</a></li> </ul> </div> </div> <!-- }}} --> |
css:
/* location {{{ */ .location { left: 280px; position: absolute; top: 9px; width: 61px; z-index: 111; } .location .select-item { border: 1px solid #B7B7B7; cursor: pointer; display: inline-block; height: 20px; line-height: 20px; padding: 0 18px 0 5px; width: 43px; } .location .item-list { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #A9A9A9; display: none; left: 0; padding: 5px 0; position: absolute; top: 21px; width: 203px; } .location.hover .item-list { display: block; } .location .item-list li { display: inline; float: left; height: auto; line-height: 1.7; margin: 0 3px; } .location .item-list li a { padding: 2px; white-space: nowrap; } .location .item-list li a:hover { background: none repeat scroll 0 0 transparent; text-decoration: underline; } .location .item-list li.checked a { background: none repeat scroll 0 0 #FF5500 !important; color: #FFFFFF; } .location .loc1, .location .loc2, .location .loc3, .location .loc4, .userDefine { float: left; line-height: 1.7; padding: 5px; width: 193px; } .location .split { border-top: 1px dotted #808080; } .location .user-define { padding: 8px 5px 0; } .location .user-define input { border: 1px solid #949494; float: left; font-size: 12px; height: 20px; line-height: 20px; color: #898888; width: 125px; } .location .user-define button { float: left; margin-left: 4px; vertical-align: middle; } .location .select-item { background: url('../images/base/icon.png') #ffffff no-repeat -893px -182px; } /* }}} */ |
js:
$('.location').toggle(function() {/* 点击所在地 {{{ */ $('.item-list').show(); $(document).click(function(event) { if(!$(event.target).isChildAndSelfOf('#filter-location')) $('.item-list').hide(); return false; }); }, function(event){ if($('.item-list').is(':visible') && event.target.id != 'filter-city') $('.item-list').hide(); else $('.item-list').show(); //这个与上边不同之处，多了一个判断，因为这个框里面还有个搜索框，我需要点搜索框的时候， //弹框不隐藏，所以在弹框显示的同时判断下点击的是不是搜索框，如果点击的是搜索框，那么不 //隐藏，反之隐藏 });/* }}} */ |
Tags: css, div, html, jquery, js
