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創建在線演示。 ;）