转载请注明出处:https://blog.csdn.net/lwang_IT/article/details/85952173?from=groupmessage
特效:
直接上源码，之前写的，希望能帮到大家
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FQ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Iconos -->
<style>
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f5f5f5;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
ul{
list-style-type: none;
}
.accordion {
margin:50px 10px 4px 10px;
background: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
display: block;
margin: 0 10px;
padding: 8px 25px 8px 30px;
color: #484649;
font-size: 14px;
border-bottom: 1px solid #f9f6fe;
position: relative;
}
.accordion li i {
position: absolute;
}
.lef{
font-weight:800px;
color:#2777c6;
top:5px;
left:2px;
font-size:18px;
}
.accordion li i.fa-chevron-down {
right:4px;
left: auto;
top:12px;
font-size: 14px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.submenu {
display: none;
padding-bottom: 6px;
background: #f9f6fe;
font-size:12px;
line-height:14px;
color: #b4b2b5;
}
.submenu li {
padding:5px 18px 5px 10px;
background: #fffeff;
}
.fon{
font-size: 13px;
color:#5BBA2C;
}
/*搜索框*/
.bar {
position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
height: 44px; padding: 0 10px;
background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */
z-index: 10;
}
.search-row {
position: relative;
height: 30px; margin: 7px 0;
}
.search-row input[type=search] {
position: absolute; top: 0;
height: 30px;
line-height: 21px;
width: 100%;
padding: 10px 15px 10px 30px;
border: 0;
border-radius: 6px;
outline: none;
background-color: rgba(0,0,0,0.1);
font-size: 16px;
text-align: center;
z-index: 100;
}
.search-row .placeholder {
position: absolute; top: 0px; left: 0; right: 0;
display: inline-block;
line-height:30px;
border: 0;
border-radius: 6px;
font-size: 16px;
text-align: center;
color: #999;
z-index: 1;
}
.search-row .placeholder .iconfont {
color: #666;
}
.search-row .placeholder .text {
vertical-align: top;
}
.active:before {
position: absolute; top:7px; left: 5px; right: auto;
display: block; margin-right: 0;
font-size: 16px;
}
.active input[type=search] {
text-align: left
}
.active .placeholder{
display: none
}
.accordion li:last-child .submenu{
padding-bottom: 0;
}
</style>
<link rel="stylesheet" href="css/iconfont.css" />
</head>
<body>
<!-- 搜索框 -->
<header class="bar">
<div class="search-row">
<input type="search" name="word" id="word">
<span class="placeholder"><span class="iconfont icon-search"></span><span class="text">搜索</span></span>
</div>
</header>
<!--搜索内容 默认全部-->
<ul id="accordion" class="accordion">
</ul>
<script src='js/jquery.min.js'></script>
<script>
(function($){
//构造器
function FQA(){
this.data={
"java":"Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征",
"node.js":"Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好",
"mySql":"MySQL是一个关系型数据库管理系统",
"mongoDB":"MongoDB 教程 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。",
"jquery":"jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。",
"javaScript":"javaScript",
"vue.js":"Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。",
"Router":"Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。",
"Axios":"Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中",
"微信小程序":"小程序开发,开发小程序很简单，看着文档踩踩坑，不是问题",
"ssm":"myBatis SpringMvc Spring",
"springBoot":"Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发...",
"Redis":"Redis是基于内存,也可以基于磁盘持久化nosql数据库,使用c语言开发。",
"es6":"JavaScript语言的下一代标准",
"css":"样式",
"html":"标签",
};
//输入框
this.$queryBox=$("#word");
//搜索结果盒子
this.$searchResultBox=$("#accordion");
this.init();
}
FQA.prototype = {//使用 prototype 属性来向对象添加属性或者方法
init:function(config){
this.start();
this.inputEvent();
this.accordion();
},
//初始全部
start(){
let dynamicH="";
for(var item in this.data){//for…of 遍历（数组） for…in 遍历对象中的属性
dynamicH+=this.rowHtml(item,this.data[item])
}
this.$searchResultBox.html(dynamicH);
},
//input事件绑定
inputEvent(){
var that=this;
this.$queryBox.focusin(function() {
$(this).parent().addClass("active iconfont icon-search");
});
this.$queryBox.focusout(function(){
let v=$(this).val()
if(v.trim().length==0 || /[br,<,>,。,.,-,:,null,&]/.test(v)) {
$(this).val(null);
$(this).parent().removeClass("active iconfont icon-search");
}
});
this.$queryBox.on("input", function(){
let v=$(this).val()
that.$searchResultBox.html("");
//长度大于0
if(v.trim().length>0 && !(/[br,<,>,。,.,-,:,null,&,]/.test(v))){
let dynamicH="";
for(var item in that.data){
var tit=item;
var dom=that.data[item];
if(tit.toString().indexOf(v)!=-1 || dom.toString().indexOf(v)!=-1){
dynamicH+=that.rowHtml(tit,dom);
}
}
var subStr=new RegExp(v,'g');
dynamicH=dynamicH.replace(subStr,'<span style="background:#fdf8ab">'+v+'</span>');
that.$searchResultBox.html(dynamicH);
}else{
that.start();
}
that.accordion();
});
},
rowHtml(tit='无',con='无'){
var h=`<li>
<div class="link">
<i class="lef">Q</i>
${tit}
<i class="fa-chevron-down iconfont icon-arrRt"></i>
</div>
<ul class="submenu">
<li>
<font class="fon">
A：
</font>
${con}
<li>
</ul>
</li>`
return h;
},
//给标题添加点击事件
accordion() {
var $links = this.$searchResultBox.find('.link');
// Evento
//$(selector).on(event,data,function) 参数: 1:事件 2:传递到函数的额外数据 3:规定当事件发生时运行的函数
$links.on('click',this.dropdown)
},
//内容展开
dropdown(e) {
// this其实是一个Html 元素。
// $this 只是个变量名,加$是为说明其是个jquery对象。
// 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方
$this = $(this),
$this.next().slideToggle();//滑动隐藏或者显示
$this.parent().toggleClass('open');//该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
}
}
window.FQA = FQA;
})($)
new FQA()
</script>
</body>
</html>转载请注明出处:https://blog.csdn.net/lwang_IT/article/details/85952173?from=groupmessage