Question

我有一个我从http://www.berriart.com/sidr/下载的插件，一旦我点击它显示滑动菜单的按钮，当我想要关闭它时我只能通过点击同一个按钮来关闭它。现在我想在正文中的任何位置添加一个单击以移回菜单。有谁可以帮我解决这个问题？

这是我的HTML：

<div id="sidr">
<!-- <button class="close-side-menu"><i class="icon-close"></i></button> -->
<ul>
<li>
</li>
</ul>
</div>
<button type="button" class="menu-icon open-side-menu">
<a id="simple-menu" href="#sidr">
</a>
</button>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>

Answer 1

试试这个脚本：

    $(document).mouseup(function (e){
    var container = $("#sidr");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {


        $.sidr('close', 'sidr');

    }
});

管理从此here获取脚本然后可以添加$.sidr('close', 'sidr');，只需确保更改＆＃39; sidr＆＃39;到你想尝试的菜单的班级名称。

希望这有帮助。

Answer 2

未经测试，但应该适用于您的目的：

$(document).ready(function() {
    $("body").click(function() {
        if ($(this).attr('id') != 'simple-menu') && !$(this).parents('#simple-menu').length) {
              $.sidr('close', 'simple-menu');
        }
    });
});

这会检查点击正文时触发的onclick事件，并确认您没有点击菜单或菜单的祖先

如何通过单击身体的任何位置关闭侧面菜单（插件）？

2 个答案: