分享个zb的搜索框下拉文章列表

会飞的鱼 0 1282 2023年11月7日

效果如下，具体想放在那里就需要自己的想象力了，css自己参考下即可，根据自己网站特色来修改即可。

前端代码块

<div class="search-area">
    <input class="search-input" placeholder="搜索感兴趣的知识和文章" type="text" name="q">
    <div class="s-drop-down">
        <?php 
        //自己遍历
        foreach($searchNws as $v) {
            ?>
        <a href="https://houz.cn" title="下拉文章展示标题" target="_blank">
            <span class="s-drop-n num1">1</span>
            <span class="s-drop-t">下拉文章展示标题</span>
            <span class="s-drop-v">999 K</span>
        </a>
        <?php } ?>
    </div>
</div>

JS代码块

$(".search-area").click(function(e) {
    if ($(".search-area").hasClass("open")) {
        $(".search-area").removeClass("open");
        return
    }
    e.stopPropagation();
    $(".search-area").addClass("open")
});
$(document).click(function(e) {
    var _con = $('input.search-input');
    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
        $(".search-area").removeClass("open")
    }
});

css代码块

.search-warp {float:right;width:460px;height:36px;background:#f3f5f6;border-radius:8px;padding-right:103px;margin:10px 0 10px 10px;box-sizing:border-box;position:relative;z-index:9;}
.search-warp .search-area {width:100% !important;height:36px;font-size:14px;color:#9199a1;padding:0;margin:0;border-radius:5px 0 0 5px;position:relative;}
.search-warp .search-area input.search-input {width:100%;height:36px;line-height:20px;padding:8px 16px;font-size:14px;color:#9199a1;border-radius:inherit;background:#f3f5f6;border:0px;}
.search-warp button.showhide-search {height:36px;line-height:21px;padding:0px 15px;color:#fff;font-size:14px;border-top-right-radius:8px;border-bottom-right-radius:8px;box-sizing:border-box;background:#3b5160;position:absolute;right:0;top:0;border:none;cursor:pointer;}
.search-warp button.showhide-search:hover {background: #54b5db;}

本文由 @会飞的鱼于 2023-11-7 发布在会飞的鱼Blog，如无特别说明，本博文章均为原创，转载请保留出处。

zb 搜索框

网友评论

暂无评论

会飞的鱼 V

一条会飞的鱼！

745 文章

7312 评论

1101 万阅读

9年博龄

最新文章

最新评论: 小妖精博客
5个月前 (2024-11-24)

还有最新下载地址吗

Emlog主题Media - V1.0.2 全新自媒体风格主题

鸿鹄小猿
6个月前 (2024-10-27)

感谢分享

FLY 1.4 开源美化V2极致版EMLOG主题

丢塔网
10个月前 (2024-06-04)

这个主题简介啊

Emlog主题Come - 20231105 v1.2

小磊
11个月前 (2024-05-30)

看看

FLY 1.4 开源美化V2极致版EMLOG主题

开箱挖掘机
11个月前 (2024-05-27)

大大请教一下fee主题现在还能下载吗？

emlog模板：fee主题商业版V2.1 功能介绍

标签

分享个zb的搜索框下拉文章列表

前端代码块

JS代码块

css代码块

网友评论

会飞的鱼 V

Emlog主题Media - V1.0.2 全新自媒体风格主题

FLY 1.4 开源美化V2极致版EMLOG主题

Emlog主题Come - 20231105 v1.2

FLY 1.4 开源美化V2极致版EMLOG主题

emlog模板：fee主题商业版V2.1 功能介绍