Question

因此，当屏幕足够窄时，我会看到这个漂亮的滑动导航面板。到目前为止，我对它非常满意，但是当用户点击/点击面板外时，我希望它关闭。我如何修改我的jQuery脚本来实现这一目标？（我是jQuery新手）

网站：http://www.toprival.com/temp/side_menu/side_menu1.html

jQuery代码：

$(document).ready(function() {
    $panel = $("#panel");
    $tab = $("#tab");
    $menu_icon = $("#menu_icon");

    $tab.mousedown(function() {
        var currentPanelPosition = $panel.css("left");
        var newPanelPosition;

        if (currentPanelPosition === "0px") {
            newPanelPosition = "-200px";
            $menu_icon.css("background-position-y", "0px");
        } else {
            newPanelPosition = "0px";
            $menu_icon.css("background-position-y", "-40px");
        }

        $panel.animate({"left" : newPanelPosition}, 400, "easeOutExpo");
    });
});

Answer 1

您可以将标题和段落包装在div中，然后点击该div触发您的菜单关闭。

<div id="wrapper">
    <div id="panel">...</div>
    <div id="content">
        <h1></h1>
        <p></p>
    </div>
</div>

然后在您的javascript中添加：

$('#content').click(function(){
    if (currentPanelPosition === "0px") {
        $('#tab').trigger('mousedown');
    }
});

作为旁注，您应该使用＆＃39;点击＆＃39;而不是'mousedown＆＃39;。

Answer 2

您只需在包装器中添加一个点击监听器即可。

$('#wrapper').on('click', function(e){
    $('#panel').animate({"left": "-200px"}, 400, "easeOutExpo");
});

你唯一的问题就是你的面板在同一个包装div中，所以即使你点击面板本身的任何地方，面板也会关闭。

我认为最好将面板div移到包装器之外，或者像'jdehlin'建议的那样，将段落等放在一个单独的div中，然后将点击监听器附加到它。

单击外部区域时如何关闭滑动面板？

2 个答案: