javascript - 响应式菜单在点击时闪烁

Question

我收到用户的报告，当他们点击手机的 3 行移动菜单时，菜单不会保持打开状态，只会闪烁并消失。它发生在 iOS 和 Android 手机上。

http://samiconcepts.com/xidax-home (这是有问题的网站)。

任何人都可以协助解决这个问题，我不知道如何解决:/谢谢

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

  var opts = {
    selector: '.dro

    pdown ',
    toggle: 'menuR1',
    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);

.dropdown {
  FONT-SIZE: 12PX;
  position: relative;
  width: 100%;
  padding: 10px;
  margin-right: 10px;
  text-align: right;
  margin: 0 auto;
  color: #a3a3a3;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
}

.dropdown a {
  display: block;
  text-decoration: none;
  color: #2f2f2f;
}


/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
  text-align: right;
  margin-right: 40px;
  margin-top: 20px;
}


/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #fff;
}


/* options */

.dropdown-menu .option a {
  padding: 15px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border-bottom: 1px solid #e8e8e8;
  text-align: center;
}

.respMenu {
  display: block;
}

.header2 {
  height: 65px;
  width: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  z-index: 9999;
}

.dropdown-menu .option a:hover {
  background-color: #02bc00;
  cursor: pointer;
  color: #fff;
}


/* open */

.dropdown-open {
  z-index: 400;
}

.dropdown-open>.dropdown-menu {
  display: block;
  margin-top: -34px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header2">

  <a href="/"><img src="/images-xidax/logo-white.png" class="logoR"></a>

  <div id="language" class="dropdown">
    <a class="dropdown-toggle"><img src="/images-sumo/list-menu.png" class="menuR1"></a>
    <ul class="dropdown-menu">
      <li class="option"><a href="/">PRODUCTS</a></li>
      <li class="option"><a href="/">REVIEWS</a></li>
      <li class="option"><a href="/">FINANCING</a></li>
      <li class="option"><a href="/">COMPANY</a></li>
      <li class="option"><a href="/">CONTACT</a></li>
      <li class="option"><a href="/">CART</a></li>


    </ul>
  </div>

</div>

Answer 1

同时在同一个元素上时，touchstart 和 click 似乎会带来问题。因此，touchstart 将触发点击，使菜单闪烁。

但是，您可以检查当前设备是否为触摸设备，并且只添加所需的事件(触摸或单击):

我在三行中修改了你的 JS:

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

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

       var clickEvent = (function() {
         if ('ontouchstart' in document.documentElement === true)
         return 'touchstart';
         else
         return 'click';
       })();

       var isTouchDevice = 'ontouchstart' in document.documentElement === true;
       var dropdownEvent = isTouchDevice ? 'touchstart.dropdown' : 'click.dropdown';

       $(document).on(dropdownEvent, 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);

您可以通过打开 mobile view 在 Chrome 上重现问题。 .

编辑* 我修复了从上面代码复制的语法错误。* 在 Chrome 中切换移动和桌面 View 后注意刷新浏览器，以便在初始化 JavaScript 时使用正确的事件。