分享个zb的搜索框下拉文章列表
0
374
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;}
在线咨询
@酷鱼：没打算开放下载呢