Question

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

我的sidr侧左菜单工作正常。

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

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

我找到了一个解决方案，也就是说，如果我将sidr菜单放在上边缘，与我的链接不对齐以打开菜单，问题就解决了，就像在我的第二张图片中一样。

但是我不想给这个边缘顶部，所以我正在寻找其他解决方案。

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

（这只发生在手机和Android浏览器上，当你购买智能手机时，但是我想在手机上使用它，许多用户必须使用我认为是默认的Internet Explorer浏览器for android。）

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

enter image description here

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

enter image description here

这是我启动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

最简单的方法，恕我直言，是为了防止首次点击该链接，即：

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

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

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

2 个答案: