[英]jQuery click event search bar
I have a jQuery issue I need help with. 我有一个需要帮助的jQuery问题。
On my WordPress site I'm using a jQuery script for search bar. 在我的WordPress网站上,我正在使用jQuery脚本作为搜索栏。 Currently there is a button and on click it shows up a search bar. 当前有一个按钮,单击它会显示一个搜索栏。 I want that search bar to be visible by default (always). 我希望默认情况下(始终)显示该搜索栏。 So I wouldn't have to click on a button, but instead have my search bar visible all the time. 因此,我不必单击按钮,而是使搜索栏始终可见。
Here is html code: 这是html代码:
<div class="top-search-form">
<div class="gdl-search-button" id="gdl-search-button"></div>
<div class="search-wrapper">
<div class="gdl-search-form">
<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
<?php
$search_val = get_search_query();
if( empty($search_val) ){
$search_val = __("Pretraga.." , "gdl_front_end");
}
?>
<div class="search-text">
<input type="text" value="<?php echo $search_val; ?>" name="s" id="s" autocomplete="off" data-default="<?php echo $search_val; ?>" />
</div>
<input type="submit" id="searchsubmit" value="<?php _e("Kreni", "gdl_front_end") ?>" />
<div class="clear"></div>
</form>
</div>
And this is jQuery function: 这是jQuery函数:
var search_button = jQuery("#gdl-search-button");
search_button.click(function(){
if(jQuery(this).hasClass('active')){
jQuery(this).removeClass('active');
jQuery(this).siblings('.search-wrapper').slideUp(200);
}else{
jQuery(this).addClass('active');
jQuery(this).siblings('.search-wrapper').slideDown(200);
}
return false;
});
jQuery("#gdl-search-button, .search-wrapper").click(function(e){
if (e.stopPropagation){ e.stopPropagation(); }
else if(window.event){ window.event.cancelBubble = true; }
});
jQuery("html").click(function(){
search_button.removeClass('active');
search_button.siblings('.search-wrapper').slideUp(200);
});
Remove the relevant .click
event, and display: block
the main search bar container in the CSS. 删除相关的.click
事件,并display: block
在CSS中display: block
主搜索栏容器。 (this should be enough to get you there) (这足以让您到达那里)
1.) Remove the jQuery related to search bar show functionality. 1.)删除与搜索栏显示功能相关的jQuery。 (eg. click
event( s )). (例如, click
事件(S))。
2.) Alter .css
file where search elements are display:none;
2.) Alter .css
文件,其中display:none;
搜索元素display:none;
or display:hidden;
或display:hidden;
if a click event is showing them, then mostly likely they are display:none;
如果单击事件显示它们,则很可能display:none;
它们display:none;
in the css (more code would be beneficial for this reason) . 在CSS中(出于这个原因,更多代码将是有益的) 。 You can comment out the click event for testing by wrapping this at the start <%--
and this at the end --%>
您可以将点击事件注释掉以进行测试,方法是将其包装在<%--
开头,并将其包装在--%>
末尾
3.) Assure relevant css is now display:block;
3.)确保现在display:block;
相关的CSS display:block;
after step 2.) (But if you remove none; by default it should display) 在第2步之后。) (但是,如果您未删除任何内容,则默认情况下应显示)
If this doesn't work show full code or create an online demo with an online IDE like jSfiddle . 如果这不起作用,请显示完整代码,或使用jSfiddle之类的在线IDE创建在线演示。 ;) ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.