jQuery单击事件搜索栏

Question

我有一个需要帮助的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);           
}); 

Answer 1

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

---

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

2.） Alter .css文件，其中display:none;搜索元素display:none; 或display:hidden; 如果单击事件显示它们，则很可能display:none;它们display:none; 在CSS中（出于这个原因，更多代码将是有益的） 。 您可以将点击事件注释掉以进行测试，方法是将其包装在<%--开头，并将其包装在--%>末尾

3.）确保现在display:block;相关的CSS display:block; 在第2步之后。） （但是，如果您未删除任何内容，则默认情况下应显示）

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