枫枫知道个人博客
首页
新闻
心情
关于
文章搜索
网站导航
项目相关
官方文档
首页
新闻
心情
关于
文章搜索
网站导航
项目相关
官方文档
登录
注册
【项目相关】0208--文章搜索
前端的一些必备知识 判断类属性是否存在与节点中 JavaSc
搜索
[[ slide_text ]]
[[ item.content ]]
101
12
【项目相关】0208--文章搜索
发布时间:
2022-02-09
作者:
枫枫
来源:
枫枫知道个人博客
python
Vue
Django
前端的一些必备知识 判断类属性是否存在与节点中 ```JavaScript let box = document.querySelector('.search') box.classList.contains('show') ``` 添加与删除类属性 ```JavaScript box.classList.add('show') box.classList.remove('show') ``` js实现新建标签页跳转 ```JavaScript window.open(url=`/?search=...`, name='_blank') ``` html结构 ```JavaScript <div class="search"> <input v-model="search_key" type="text" placeholder="搜索文章"> <button @click="show_search"><i class="fa fa-search"></i></button> </div> ``` 一共有四个地方要注意     这里的js代码比较简单 点击的时候去获取search标签,判断是否存在特定类属性 如果存在就说明是展开状态 如果不存在就说明是收缩状态 ```JavaScript show_search() { let box = document.querySelector('.search') if (!box.classList.contains('show_search')) { box.classList.add('show_search') } else { if (this.search_key){ window.open(url=`/serach/?key=${this.search_key}`, name='_blank') return } box.classList.remove('show_search') } } ``` css样式编写 css部分就比较复杂了,要对应四种状态,搜索框的展开与收缩,以及导航条的显示与隐藏,两两组合,共有四种状态 我们一一举例 导航条在顶部,搜索框收缩状态,对应的类名为 ```CSS nav .serach{ } ``` 导航条在顶部,搜索框展开状态,对应的类名为 ```CSS nav .show_search{ } ``` 导航条在其他位置,搜索框收缩状态,对应的类名为 ```CSS .show_nav .serach{ } ``` 导航条在其他位置,搜索框展开状态,对应的类名为 ```CSS .show_nav .show_search{ } ``` 然后去编写对应的代码 ```CSS nav .search { display: inline-flex; input { border: none; padding-left: 10px; outline: none; width: 0; height: 40px; border-radius: 5px 0 0 5px; transition: all 0.3s; opacity: 0; } button { width: 50px; height: 40px; color: white; border: none; cursor: pointer; border-radius: 0 5px 5px 0; background-color: rgba(white, 0); transition: all 0.3s; } } nav .show_search { input { width: 300px; opacity: 1; background-color: rgba(white, 0.5); } button { color: #333333; background-color: rgba(white, 0.5); } } .show_nav .search { button { color: #333333; } } .show_nav .show_search { input { border-width: 1px 0 1px 1px; border-style: solid; border-color: #f0eeee; } button { border-width: 1px 1px 1px 0; border-style: solid; border-color: #f0eeee; } } ```
101
12
已经是第一篇啦
下一篇:项目搭建
你觉得文章怎么样
发布评论
清闲.
### 牛逼
10个月前
点赞(3)
回复(2)
mustcd @ 清闲.
牛
2个月前
点赞(1)
回复
mustcd @ 清闲.
6
2个月前
点赞(0)
回复
回复
苦酒

11个月前
点赞(1)
回复(1)
mustcd @ 苦酒
6
2个月前
点赞(0)
回复
回复
1241 人参与,5 条评论