jQuery點擊事件搜索欄

我有一個我需要幫助的jQuery問題。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);   
});

來源

2015-06-16 Denin Korjenic

東西缺失，實際上DOM-將代碼附加到HTML中。 – briansol

爲什麼不擺脫jquery，只是更新的CSS不隱藏它在第一個地方？ – micahblu

刪除click事件，並在CSS中顯示：block？ –

刪除相關.click事件，display: block在主搜索條容納CSS。 （這應該足以讓你有）

1）刪除與搜索欄jQuery的顯示功能。（例如，click事件（s））。

2）阿爾特.css文件，其中搜索元素display:none;或display:hidden;如果單擊事件正在給他們，那麼最有可能他們是display:none;在CSS （更多的代碼將是這個原因）有益。您可以通過在開始<%--這個包裹，並在年底註釋掉測試click事件這--%>

3）保證不對現在display:block;相關CSS是步驟2）後（但如果你刪除無;默認情況下，它應該顯示）

如果這不起作用顯示完整的代碼或使用在線IDE像jSfiddle創建一個在線演示。 ;）

來源

2015-06-16 21:28:39

現在正常工作，謝謝。不知道這是如此簡單。 –

沒有問題，兄弟！ –

jQuery點擊事件搜索欄

回答

相關問題