jquery - 如何添加jQuery关闭按钮？

Question

<script type="text/java script">    
$(function () {
        $(".box").click(function () {
            var $overlay = $(this).find(".overlay");
            if ($overlay.is(':visible')) {
                $overlay.fadeOut();
            } else {
                $overlay.fadeIn();
            }
        });
    });
</script>

这是我的菜单脚本单击按钮显示此菜单。如何添加关闭按钮？

Answer 1

像这样的东西？

$('.closeButton').click(function(e) {
    var $overlay = $(this).find(".overlay");
    $overlay.fadeOut();
});

您甚至可以更进一步，将该代码放入一个函数中，您可以从两个代码片段中调用该函数以实现可重用性......

function closeOverlay() {
    var $overlay = $(this).find(".overlay");
    $overlay.fadeOut();
}

$('.closeButton').click(function(e) {
    closeOverlay();
});

$(".box").click(function () {
    var $overlay = $(this).find(".overlay");
    if ($overlay.is(':visible')) {
        closeOverlay();
    } else {
        $overlay.fadeIn();
    }
});