1

所以我有这个漂亮的滑动导航面板，它会在屏幕足够窄时出现。到目前为止，我对它非常满意，但我希望它在用户在面板外单击/点击时关闭。我将如何修改我的 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");
    });
});
4

2 回答 2

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

作为旁注，您可能应该使用“click”而不是“mousedown”。

于 2013-06-24T15:33:18.527 回答
0

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

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

但是，您将遇到的唯一问题是您的面板位于同一个包装 div 中，因此即使您单击面板本身的任何位置，面板也会关闭。

我认为最好将面板 div 移到包装器之外，或者按照“jdehlin”的建议，将段落等放在一个单独的 div 中，然后将点击侦听器附加到它上面。

于 2013-06-24T15:35:18.127 回答