Question

（请参阅此链接到jsfiddle - http://jsfiddle.net/AshThomas/742tvhqy/1/）

你好，

如果此代码在计算机上运行...单击菜单按钮时，按钮仍会显示“悬停”，直到光标移动为止（即如果单击按钮并且不移动光标，则按钮仍然出现'徘徊'）

此外，如果此代码在Samsung Galaxy S3 Mini的标准互联网浏览器上运行（这可能与其他Android手机相同），菜单会打开然后立即关闭，即使菜单按钮只按一次。 / p>

我相信这两次事件是相关的，但我似乎无法找到解决方案。

基本上，我希望在点击按钮后停止菜单按钮出现'悬停'（无需移动光标），我希望菜单在手机上按下菜单按钮时保持打开状态上面提到的...希望这两个问题是相关的！

<body>
  <div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed; 
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease; 
transition: right 300ms ease; right: -15.625em;  -webkit-overflow-scrolling: touch;">
    <div id="menuWrapper">
      <ul>
        <li class="boldMenu"><a href="#">Home</a>
        </li>
        <li class="boldMenu"><a href="#">About</a>
        </li>
        <li class="boldMenu"><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>



  <div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">

    <a href="#menu" class="menu-link">☰</a>
  </div>

Answer 1

我已经解决了你的问题。我想这是浏览器的一个错误，因为它不会在动画后重新渲染DOM元素。

http://jsfiddle.net/742tvhqy/4/

查看第104行

menuLink.on('click.bigSlide', function(e) {
  e.preventDefault();
  if (menu._state === 'closed') {
    menu.open();
  } else {
    menu.close();
  }
   menuLink.fadeOut(5).fadeIn(10);
});

你看到fadeOut / fadeIn的最后一行？这是解决方案。我试过用hide（）。show（）;但它不起作用，即使我使用fadeOut（1）它不起作用:)但常见的是，5ms与1ms相同。我现在想不出更好的解决方案。它有效。

顺便说一句。在你的位置我会用几行jQuery代码而不是所有那些花哨的css动画来做所有这些东西..

Answer 2

也许这样做......在按钮上添加另一个类，并在css中为类提供悬停的属性...

menu-link-class:hover {...}

然后在你的js中执行此操作

$('.menu-link').click(function() {
    var me = $(this);
    me.removeClass('menu-link-class');
    setTimeout(function() {
        me.addClass('menu-link-class');
    },1);
});

更新：特别感谢@Lukas Liesis

你有2个选择：）

menuLink.on('click.bigSlide', function(e) {
    e.preventDefault();
    if (menu._state === 'closed') {
        menu.open();
    } else {
        menu.close();
    }
    menuLink.fadeOut(5).fadeIn(10);
});

或

menuLink.on('click.bigSlide', function(e) {
    e.preventDefault();
    if (menu._state === 'closed') {
        menu.open();
    } else {
        menu.close();
    }
    menuLink.removeClass('menu-link-class');
    setTimeout(function() {
        menuLink.addClass('menu-link-class');
    },1);
});

如何防止按钮出现悬停

2 个答案: