我有一个带有搜索标签的按钮。这个想法是,当您单击按钮(并将其置于活动状态)时,显示在我的搜索字段:无显示。我当前的设置似乎不起作用。我创建了一个包含我的问题的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库,例如
Google CDN版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
或下载压缩的生产版jQuery 1.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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句