下拉列表中的搜索欄

我有一個Wordpress網站，對於移動版本，我在頂部有一個菜單欄，並帶有類別下拉列表。我也想添加搜索欄。下拉列表中的搜索欄

我有一個工作下拉列表，底部包含搜索欄，但是當您在搜索欄中單擊時，列表會返回。我想知道什麼是最好的方式，或者有什麼可能的方式，讓它保持下來？

我點擊了觸摸移動設備上的某個JavaScript，並且它是滑動切換。所有相關的代碼被提供如下：

HTML

<div id="nav-responsive"> 
    <div class="categories-responsive fssinclair_bold"> 
    <ul id="nav"> 
     <li><h3 class="fssinclair_bold"></h3> 
     <ul> 
      <?php wp_list_categories('&title_li=') ?> 
     </ul> 
     <div class="search-responsive"> 
      <form method="get" id="searchform" action="<?php echo home_url('/'); ?>"> 
      <div id="search-inputs"> 
       <input type="text" value="" name="s" id="search-box" placeholder="SEARCH" /> 
       <input type="hidden" name="ref_url" value="<?php esc_url($_SERVER['REQUEST_URI'])?>"> 
      </div> 
      </form> 
     </div> 
     </li>  
    </ul> 
    </div> 
</div>

的JavaScript爲它在觸摸設備上切換：

$(document).ready(function() { 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    $('.categories-responsive').click(function(){ 
    $(this).find('ul#nav').find('ul').slideToggle(); 
});

來源

2013-04-17 user2212564

工作解決方案是創建一個單獨的函數來那些元件或使用stopPropagation所以子元素不會被點擊事件觸發。事情是這樣的：

onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();"

或此爲您搜索字段

$("#searchform").click(function(event){ event.stopPropagation(); });

來源

2013-04-17 11:06:05

我有一個很好的閱讀，我不能確定，如果這是可以得到它的工作（或我可能不會理解，因爲我是jQuery的新手）。會不會有一種方法可以點擊菜單的頂部欄和下拉菜單，再次單擊它並返回而不是1行slideToggle？如果那有意義的話！當我使用slideDown時，搜索欄保持放置狀態，只需要另一個功能來說再次點擊即可退出？對不起，如果我沒有任何意義，我使用沼澤標準的jQuery！ – user2212564

對不起，也許我不明白你問的是什麼。你想要一個下拉菜單，你點擊一個按鈕就會顯示選項，當你再次點擊它時隱藏它們？ –

多數民衆贊成它是偉大的，但在列表裏面的主要概念是一個搜索框，所以即使我點擊那個時刻列表回去了（它的死惱人！）它必須是在我的JS做的事情，讓你只需點擊頂部菜單欄即可切換，而不是嵌入其中的其他元素？感謝您的回覆！ – user2212564

下拉列表中的搜索欄

回答

相關問題