0

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

1 回答 1

0

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

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

或者这个用于您的搜索字段

$("#searchform").click(function(event){ event.stopPropagation(); });
于 2013-04-17T11:06:05.610 回答