4

我在以下网址关注了 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/

4

2 回答 2

3

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

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

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()出于某种原因使用了两次）。

于 2014-05-14T21:07:39.180 回答
0

My solution to that problem is based on the top answer which helped me find the right way.

So I find all the links and prevent their default behavior until the menu is opened and then disable them again when the menu is closed.

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

The tricky part here is that we need to change the plugin itself so that this code can work.

The problem is that the functions onOpen() and onClose() are called after the animation is done but not in it's callback function. That makes the functions to be called with the animation which is async and here is our issue.

Wrong:

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

We just need to insert the onClose function inside the animation callback function in order to lock the links when the menu is closed and we should do the same with the on open code fragment.

Right:

// 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();        
});
于 2014-11-17T10:16:41.550 回答