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(); });

下拉列表中的搜索栏

1 个答案: