当我点击打开“侧边菜单”时，我也在点击我的侧边菜单项

Question

我关注了 sidr 文档：http://www.berriart.com/sidr/

而且我的 sidr 左侧菜单已经可以正常工作了。

但是在我的手机上，只有在安卓默认浏览器上，当我点击我的链接“打开菜单”时，我也会点击我的菜单项“菜单 1”，所以它会打开我的子菜单项，并带有我的切换效果。我不想要这个。

我只想在我的菜单项中单击时打开我的子菜单项，而不是在我的链接中打开菜单。

我找到了一个解决方案，也就是说，如果我将我的 sidr 菜单放在顶部有一些边距，而不是与我打开菜单的链接对齐，那么问题就解决了，就像我的第二张图片一样。

但我不想给那个margin-top，所以我试图寻找其他解决方案。

有人有这个插件的经验，可以给我帮助吗？？

(这只发生在移动设备和购买智能手机时附带的安卓浏览器上，但我想在移动设备上使用它，许多用户必须使用我认为默认的 Internet Explorer安卓浏览器。）

如下图所示，我遇到了问题，因为“打开菜单与“菜单 1”对齐，所以我都点击了！

如下图，我没有问题，因为“打开菜单与“菜单1”不对齐，所以我只点击“打开菜单”！

这是我的 jQuery 启动 sidr 插件：

 $(document).ready(function() {
      $('#simple-menu').sidr({
           name: 'sidr', 
          speed: 200, 
          side: 'left',
          source: null, 
          renaming: true, 
          body: 'body'

         });
    });

$(document).ready(function() {
    $('.sub-menu-sidr').hide();

    $("#sidr li:has(ul)").click(function(){

    $("ul",this).toggle('fast');
    });
});

这是我的小提琴：

http://jsfiddle.net/y4CX4/1/

Answer 1

最简单的方法是，恕我直言，防止第一次点击该链接发生，即：

定义一个变量来检查链接是否被点击，在点击事件时检查值并防止事件传播，然后将变量设置为其他值，以允许所有未来的点击自然发生，例如：

var click = false;
$('#sidr > ul > li').first().find('a').first().click( function(e) { if ( click == false ) {
    e.stopPropagation();
    click = true;
} });

下一步是添加一个函数，当菜单关闭时重置此变量：

      onClose : function() {
          click = false;
      }

可以在此处找到一个工作示例：http://jsfiddle.net/y4CX4/3/

还要确保您使用相同的函数才能正确使用变量click（在您发布的小提琴中，您出于某种原因使用了两次$(document).ready()）。

Answer 2

我对该问题的解决方案是基于帮助我找到正确方法的最佳答案。

所以我找到了所有链接，并在菜单打开之前阻止它们的默认行为，然后在菜单关闭时再次禁用它们。

var menuButton = $('.js-side-menu-toggle');
var sideMenuLinks = $('#sidr').find('a');
var canClick = false;

sideMenuLinks.on('click', function(e) {
    if (!canClick) {
        e.preventDefault();
    }
});

menuButton.sidr({
    onOpen: function() {
        canClick = true;
    },
    onClose: function() {
        canClick = false;
    }
});

这里的棘手部分是我们需要更改插件本身，以便这段代码可以工作。

问题是函数onOpen() 和onClose() 在动画完成后被调用，而不是在它的回调函数中。这使得函数被调用的动画是异步的，这是我们的问题。

错误：

// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
    $html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
    $menu.removeAttr('style').hide();
    $body.removeAttr('style');
    $('html').removeAttr('style');
    sidrMoving = false;
    sidrOpened = false;
    // Callback
    if(typeof callback === 'function') {
        callback(name);
    }
    $body.removeClass('sidr-animating');          
});

// onClose callback
onClose();

我们只需要在动画回调函数中插入onClose函数，以便在菜单关闭时锁定链接，我们应该对on open代码片段做同样的事情。

右：

// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
    $html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
    $menu.removeAttr('style').hide();
    $body.removeAttr('style');
    $('html').removeAttr('style');
    sidrMoving = false;
    sidrOpened = false;
    // Callback
    if(typeof callback === 'function') {
        callback(name);
    }
    $body.removeClass('sidr-animating');  

    // onClose callback
    onClose();        
});