使按钮的活动状态显示我的搜索框

我有一个带有搜索标签的按钮。这个想法是，当你点击按钮（并将其置于活动状态）时，我的搜索字段就会显示出来：没有显示。然而，我目前的设置似乎不起作用。我创建了一个包含我的问题的jsfiddle。由于这已经在ModX中了，我无法粘贴确切的代码，但如果单击按钮显示文本，则会产生相同的结果。

<div id="header">
    <div class="search_function">[[$base.search-tpl]]</div>
    <button class="search_button">Search</button>

#header label{
    display:none;
}
#header input{
    width:88%;
    height:30px;
    float:left;
    margin:0px;
    padding:0 0 0 10%;
    text-align:center;
    border-radius:0px;
}
#header button{
    width:12%;
    height:30px;
    margin:0px;
    padding:0px;
    background-image:url('../images/transparent_search_icon30x30.png');
    background-color:#eeeeee;
    background-repeat:no-repeat;
    background-position:center;
}
.search_button:active > .search_function{
    display:all;
}
.search_function{
    display:none;
}

好的，首先在文档的<head>部分包括jQuery库，例如

谷歌CDN版本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

或者下载压缩的生产jQuery1.11.0并将其放在根文件夹中，然后像下面的一样包含它

<script src="jquery-1.11.0.min.js"></script>

然后在</body>标签之前添加以下脚本

<script>
  (function($) {
    $('.search_button').click(function() {
      if($('.search_function').css('display') === 'none') {
         $('.search_function').slideToggle(350);
      }
    });
  })(jQuery);
</script>

这是一个FIDDLE

相关内容

最新更新

热门标签：