gpt4 book ai didi

html - 使按钮的事件状态显示我的搜索框

转载 作者:太空宇宙 更新时间:2023-11-04 13:31:23 26 4
gpt4 key购买 nike

我有一个带有搜索标签的按钮。这个想法是,当您单击按钮(并将其置于事件状态)时,我显示的搜索字段:无变得可见。但是,我当前的设置似乎不起作用。我创建了一个 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>

或下载压缩包,制作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

关于html - 使按钮的事件状态显示我的搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23336359/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com