css - 下拉列表中的搜索栏

Question

我有一个 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();
});

Answer 1

可行的解决方案是为这些元素创建一个单独的函数或使用 stopPropagation，这样子元素就不会在点击事件时被触发。像这样:

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

或这个用于您的搜索字段

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