当我点击打开"sidr侧菜单“时，我也点击了我的sidr菜单项。

Question

我在：http://www.berriart.com/sidr/上跟踪了sidr文档

我已经把西德尔左边的菜单做得很好了。

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

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

我找到了一个解决方案，那就是，如果我把我的sidr菜单与一些边缘顶部，不对齐我的链接打开菜单，问题解决了，就像在我的第二张图片。

但我不想给这个利润最高，所以我试着寻找其他解决方案。

有人对这个插件很有经验，能帮我吗？

(这种情况只发生在手机和安卓浏览器上，当你购买智能手机时，就会出现这种情况，但我想在手机上使用，很多用户必须使用互联网浏览器，我认为这是安卓的默认浏览器。)

像下面的图片，我有问题，因为“开放菜单是对齐的菜单1”，所以我点击这两个！

​

​

像下面这样的图片，我没有问题，因为“开放菜单不对齐”菜单1，所以我只点击“打开菜单”！

​

​

这是我启动sidr插件的jQuery：

 $(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

要做到这一点，IMHO最简单的方法是防止第一次单击该链接，即：

定义一个变量以检查是否单击了链接，在单击“事件”时检查该值并防止该事件传播，然后将该变量设置为其他内容，以便允许以后的所有单击自然发生，例如：

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函数，以便在关闭菜单和时锁定链接，我们应该对打开的代码片段进行同样的操作。

右侧：

// 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();        
});