Javascript 当我点击打开；sidr侧菜单“；I´；我还点击了我的sidr菜单项

我遵循了sidr文档，网址为：

我已经有我的sidr侧左菜单工作良好

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

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

我找到了一个解决方案，就是，如果我把我的sidr菜单放在页边空白处，使其与打开菜单的链接不对齐，问题就解决了，就像我的第二张图片一样

但我不想给这个利润率最高，所以我试图寻找其他的解决办法

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

（这只发生在手机和android浏览器上，当您购买智能手机时，android浏览器会出现这种情况，但我想在手机上使用，许多用户必须使用internet explorer，我认为这是android的默认浏览器。）

像下图一样，我遇到了问题，因为“打开菜单”与“菜单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');
    });
});

这是我的小提琴：

---

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

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

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

下一步是添加一个函数，在菜单关闭时通过添加以下内容重置此变量：

      onClose : function() {
          click = false;
      }

可在此处找到一个工作示例：

---

还要确保使用相同的函数，以便正确使用变量

单击
（在您发布的小提琴中，由于某种原因，您使用了
$（document）.ready（）
两次）。
我对该问题的解决方案基于帮助我找到正确方法的顶部答案

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

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

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

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

我的电脑是InternetExplorer10，android是默认浏览器，我想它是IE。我已经在两个不同的android上测试过了，就在这个浏览器上，当我点击打开侧菜单时出现问题！IE完全不适用于Android。JSFIDLE在我的Android chrome浏览器上运行良好。是的，jbyrne2007在我的Android chrome浏览器上也运行良好，但在另一个浏览器上，我认为当你购买一个浏览器时，它是安卓的默认浏览器，不运行良好！谢谢您的回答，但是您的JSFIDLE可以在桌面、移动设备、Im测试上工作，当我单击“打开菜单”时，什么也没有发生：/，菜单没有打开。我需要添加以下内容：-webkit溢出滚动：触摸；到my.sidr，现在它可以工作了，但是我的问题仍然存在于android默认浏览器上！你对这个问题的意思是什么？这只是一个简单的解决方案，似乎是一个需要进一步研究的问题。当您打开侧菜单时，它只是取消第一次单击第一个元素，从而使它感觉工作正常。您应该使用某种验证，以便仅在移动设备上使用它（请参阅）。