分类查询框

最新推荐文章于 2021-12-02 10:27:38 发布

罗荣盛

最新推荐文章于 2021-12-02 10:27:38 发布

阅读量380

点赞数

分类专栏： bootstrap javascript

本文链接：https://blog.csdn.net/luorongsheng/article/details/52450713

版权

javascript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

bootstrap

0 篇文章 0 订阅

订阅专栏

因公司需求，今天上午做一个分类搜索的！记录自己学习之路！

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！

罗荣盛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分类查询框

因公司需求，今天上午做一个分类搜索的！记录自己学习之路！search.htmlhtml>html lang="en">head> meta charset="UTF-8"> title>分类搜索title> link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> link rel="
复制链接

扫一扫

专栏目录