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

補足として、おそらく「マウスダウン」ではなく「クリック」を使用する必要があります。

于 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 に答える