因公司需求,今天上午做一个分类搜索的!记录自己学习之路!
search.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分类搜索</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/search.css"> </head> <body> <div class="bg"> <div class="input-group"> <span class="input-group-addon fenlei">全部 </span> <ul class="search"> <li>全部</li> <li>分类一</li> <li>分类二</li> <li>分类三</li> <li>分类四</li> <li>分类五</li> <li>分类六</li> <li>分类七</li> <li>分类八</li> <li>分类九</li> <li>分类十</li> </ul> <input type="text" class="form-control shuru" placeholder="搜索"> <span class="input-group-addon btn1"> <a class="glyphicon glyphicon-search asearch"></a> </span> </div> </div> <script src="js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="js/search.js"></script> </body> </html>css 文件
*{ margin:0; padding:0; list-style: none; text-decoration: none; } a:hover{ text-decoration: none; } .input-group{ margin-top:100px; margin-left: 20px; width:260px; } .fenlei{ color: gray; width: 60px; height: 30px; font-size: 8px; position: relative; border: none; border-bottom-right-radius: 0; } .search{ display: none; padding: 0; margin: 0; position: absolute; top:32px; left: 0; } .search li{ text-align: center; list-style: none; width:61px; height:30px; line-height: 30px; cursor: pointer; border: 1px dashed lightgray; border-top:none; color: gray; font-size: 8px; background-color: white; } .btn1{ width:50px; border: none; cursor: pointer; } .shuru{ /*background-color: pink;*/ border: none; outline: none; } .shuru:focus{ outline: none; -webkit-box-shadow: none; box-shadow: none; background-color: lightgoldenrodyellow; } .bg{ padding: 5px; height: 300px; width: 300px; background-color: #222D32; }js文件
$(".fenlei").on('click',function(e){ if($(".search").css('display')=="block"){ $(".search").hide(); }else { $(".search").show(); } }); $("li").on('click',function(){ $(".fenlei").text($(this).text()); $(".search").hide(); }); $(".btn1").on('click',function(){ if($(".fenlei").text()=="分类一"){ alert("只能在分类一里面搜索!"); }else { alert("其他的条件搜索!"); } }) $(".shuru").on('foucs',function(){ $(this).css('outline','none'); $(this).css('background-color','red'); });
一个简单的demo!