Question

我有这个JQuery函数：

function JQueryPopup(value) {
    $(value).show();

    $('#JQueryClose').click(function(){
        $(value).hide();
    });

    $( document ).on( 'click', function ( e ) {
        if ( $( e.target ).closest( elem ).length === 0 ) {
            $(value).hide();
        }
    });

    $( document ).on( 'keydown', function ( e ) {
        if ( e.keyCode === 27 ) { // ESC
            $(value).hide();
        }
    });
}

当我调用该函数时，它显示div（值）

我如何使用用于打开它的按钮/链接关闭它？

Answer 1

您可以使用toggle()功能进行显示/隐藏。

但是你要在函数内部绑定事件处理程序...请注意，每当调用函数JQueryPopup时（除非它被绑定到ready事件并且仅被调用一旦），它就会添加一个新的处理程序，之后你的代码可能会按预期工作，因为不止一个处理程序会触发事件。

按如下方式更改您的代码（假设您希望在页面加载时绑定事件）：

$(document).ready(function(){

 $('#JQueryClose').click(function(){
    $(value).hide();
 });

 $( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest( elem ).length === 0 ) {
        $(value).hide();
    }
 });

 $( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $(value).hide();
    }
 });
})

function JQueryPopup(value) {
 $(value).toggle(); 
}

旁注：您似乎使用不同的方法用于相同的目的，例如click，on('click',function(){...})等，这是一种良好的做法，可以保持一致并坚持特定方法

点击时显示.show（）/。hide（）

1 个答案: