javascript - 单击滑动面板以外的区域时，如何关闭滑动面板？

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

作为旁注，您可能应该使用“点击”而不是“鼠标按下”。