j查询点击事件搜索栏

jQuery click event search bar

本文关键字：事件 搜索栏 查询      更新时间：2023-09-26

我有一个jQuery问题需要帮助。

在我的WordPress网站上，我正在使用jQuery脚本作为搜索栏。目前有一个按钮，单击它会显示一个搜索栏。我希望该搜索栏默认可见（始终）。因此，我不必单击按钮，而是始终显示我的搜索栏。

这是 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>


这是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);           
});

删除相关的.click事件，并在 CSS 中display: block主搜索栏容器。（这应该足以让你到达那里）

1.） 删除与搜索栏显示功能相关的 jQuery。（例如。 click事件）。

2.）更改.css搜索元素display:none;或display:hidden;如果点击事件显示它们的文件，那么它们很可能在css中display:none;（因此，更多的代码将是有益的）。您可以通过将其包装在开头<%--和末尾来注释掉 click 事件以进行测试--%>

3.） 确保在步骤 2.） 之后现在display:block;相关的 css。（但如果你不删除任何内容;默认情况下它应该显示）

如果这不起作用，请显示完整代码或使用像jSfiddle这样的在线IDE创建在线演示。 ;)

相关文章：