其实wordpress可伸缩性的搜索框在wp默认的主题中都有，当然也有多种实现方式，今天就给大家说一下我现在主题newth用的搜索伸缩框吧。

其实实现起来也很简单，用几行js，再加上一些css代码即可。

1、HTML结构

<div class="search-inner span-3">
 <i class="toggle-search flaticon-search4"></i>
 <div class="search-expand">
 <?php get_search_form(); ?>
 </div>
</div>

2、js代码

<script type="text/javascript">
 $('.toggle-search').click(function(){
 $('.toggle-search').toggleClass('active');
 $('.search-expand').fadeToggle(250);
 setTimeout(function(){
 $('.search-expand input').focus();
 }, 300);
 });
</script>

3、CSS

.search-inner{ 
 height: 100%;
 float: right;
}
.toggle-search {
 line-height:48px;
 cursor: pointer;
 font-size:24px;
 display: block;
 position: absolute;
 right: -51px; top: -5px;
 color:#9e9e9e;
 width:48px;
 height:48px;
 background:#fff;
 border:1px solid #e7e7e7;
 border-radius:30px;
 text-align:center;
}
.toggle-search:hover{
 color:#fff;
 background:#5396E2;
 }
.search-expand {
 display: none;
 position: absolute;
 top: 6px; right: 0px;
 }
.search-expand input {
 border: 2px solid #e2e2e2;
 border-radius: 0;
}

嗯，现在说一下怎么使用？

首先加载jquery.js， 然后把上面的js代码放到footer.php中的</body>之前即可。另外js代码中的选择符一定要与Html结构保持一致。

还有就是CSS，要弹出的搜索框开始的时候是要隐藏的，即使用display:none；点击之后，再弹出，使用就是js。

效果就如同本站所用弹出搜索框。不过我使用了Flaticon字体图标，也就是那个搜索的样式。

Last modification：April 11th, 2020 at 09:18 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏