从另一个按钮使用slideToggle可见的关闭元素?

时间:2015-05-26 15:29:52

标签: jquery

我有一个名为#map-menu-container的元素。在此单击名为#map-menu-container-btn的slideToggle按钮后,我可以看到一些按钮。使用此按钮,我可以使用按钮打开和关闭容器。

但是我想知道是否有可能以某种方式滑动在单击按钮时用所有按钮向后切换(关闭)容器?这些按钮都可以有一些检测点击的类,但是如何将它滑回容器呢?

下面的代码是处理容器的jQuery。

    //Map menu
$("#map-menu-container-btn").click(function(){
    $("#map-menu-container").slideToggle("fast", function() {
        if ($(this).is(':visible')) {
            $("p#text-map-menu").text("hide map menu");
        } else {
            $("p#text-map-menu").text("show map menu");
        }
    });
});

1 个答案:

答案 0 :(得分:1)

如果我理解正确,你只需将切换放在一个单独的函数中,然后从两个点击事件中调用它。

(function($){
    var $mapMenuContainer = $("#map-menu-container");

    var toggleMenuContainer = function(){
        $mapMenuContainer.slideToggle("fast", function() {
            if ($(this).is(':visible')) {
                $("p#text-map-menu").text("hide map menu");
                //$("#map-menu-icon").attr("src","/images/bilderLayout/map-menu-btn-up.png")
            } else {
                $("p#text-map-menu").text("show map menu"); 
                //$("#map-menu-icon").attr("src","/images/bilderLayout/map-menu-btn-down.png")  
            }
        });
    };

    $("#map-menu-container-btn, .buttons").click(toggleMenuContainer);
})(jQuery);