javascript - 菜单点击在移动版 Chrome 和 Safari 上不起作用

Question

当我在移动版 chrome 或 safari 或 chrome dev 移动响应工具中打开它时，点击不起作用。只有当我按住点击菜单时，子菜单才会显示。为什么？ 在 Firefox 移动版上，一切正常。

http://webtesty.warszawa.pl/wypnaw2/

(function($, undefined)
{
    var open = [];

    var opts = {
        selector: '.dropdown',
        toggle: 'dropdown-toggle',
        open: 'dropdown-open',
        nest: true
    };

    $(document).on('click.dropdown touchstart.dropdown', function(e)
    {
        // Close the last open dropdown if click is from outside the target dropdown
        if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
        {
            open.pop().removeClass( opts.open );
        }

        var $this = $(e.target);

        // If target is a dropdown then toggle it...
        if ( $this.hasClass( opts.toggle ) )
        {
            e.preventDefault();

            $this = $this.closest( opts.selector );

            if ( ! $this.hasClass( opts.open ) )
            {
                open.push( $this.addClass( opts.open ) );
            }
            else
            {
                open.pop().removeClass( opts.open );
            }
        }
    });

})(jQuery);

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
}
.Column
{
    display: table-cell;
    background-color: red;
}

.dropdown {
    position:relative;
    min-width:100%;
    background:#ccc;
    display: inline-block;
}
    .dropdown a {
        display:block;
        text-decoration:none;
        color:#333;
        padding: 20px;
    }

    /* toggle */
    .dropdown .dropdown-toggle {
        padding:0;
        padding: 20px;
    }

    /* dropdown */
    .dropdown-menu {
        position:absolute;
        top:100%;
        right:0;
        left:0;
        display:none;
        margin:0;
        padding:0;
        list-style-type:none;
        background:#ccc;
    }
        /* options */
        .dropdown-menu .option a {
        }
            .dropdown-menu .option a:hover {
                background-color:#aaa;
            }

    /* open */
    .dropdown-open {
        z-index:400;
    }
        .dropdown-open > .dropdown-menu {
            display:block;
        }
        
@media only screen and (min-width: 600px) {
        .dropdown-menu:hover,
.dropdown-toggle:hover + ul{
    display:block; z-index:999999999999;
}
}

@media only screen and (max-width: 600px) {

body {background:red;}
.Column {
    display: block; margin-bottom:10px;
}
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Row">
    <div class="Column">
      <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">Wypozyczalnia</a>
      <ul class="dropdown-menu">
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
      </ul>
      </div>
    </div>
    <div class="Column">
      <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">Wypozyczalnia</a>
      <ul class="dropdown-menu">
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
      </ul>
      </div>
    </div>
    <div class="Column">
        <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">Wypozyczalnia</a>
      <ul class="dropdown-menu">
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
          <li class="option"><a href="#">Wypozyczalnia</a></li>
      </ul>
      </div>
    </div>
</div>

Answer 1

在我看来，某些东西会触发您的事件回调两次。例如，某些浏览器可能会分别触发点击和触摸事件，从而打开和关闭菜单。

我没有时间彻底检查您的代码，但我的假设是，如果您更改事件处理程序的参数，那应该可以正常工作。

尝试从处理的事件中删除 click 并从那里获取它。

$(document).on('touchstart.dropdown', function(e)

显然，完全删除点击处理程序在您的情况下可能无效 用例，因此您可以将其与触摸事件支持检测等混合起来。