Question

我有一个按钮，打开一个小窗口以显示额外信息。目前它只打开，我必须单击关闭按钮关闭它，我真的不想要这个关闭按钮，但我希望能够用相同的按钮打开和关闭它。

 $(function() {
    //----- OPEN
    $('[data-popup-open]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

        e.preventDefault();
    });

    //----- CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

        e.preventDefault();
    });
});

有人可以帮助我吗？

Answer 1

尝试fadeToggle() jQuery功能。

$('button').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeToggle(350);

    e.preventDefault();
});

Answer 2

$('[data-popup-open-close]').on('click', function(e)  {
      if(!$(this).hasClass("opened")){
        //code for open
        $(this).addClass("opened")
      }else{
        //code for close
        $(this).removeClass("opened")
      }  
    });

Answer 3

您只需要在点击时找出图层是打开还是关闭并做出反应。

我使用$(..).is(':visible')作为示例，但您必须找到适用于您的方案的最佳功能。

像...这样的东西。

 $(function() {

    //----- OPEN and CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');

        // for example
        var isOpen = $('[data-popup="' + targeted_popup_class + '"]').is(':vivible'); 

        if (isOpen) {
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
        } else {
            $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
        }


        e.preventDefault();
    });
});

Answer 4

除了fadeToggle()方法之外，您还可以知道框是否可见：

$('button').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    if($('[data-popup="' + targeted_popup_class + '"]').is(':visible')) {
         //close it!
    } else {
         // open it!
    }

    e.preventDefault();
});

Answer 5

我希望它适合你。

$(function() {
    $('[data-popup-open]').on('click', function(e)  {
        if($(this).hasClass('data-popup-open'))
        {
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
        }
        else if($(this).hasClass('data-popup-close'))
        {
            $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
        }
        $(this).toggleClass('data-popup-open')
        $(this).toggleClass('data-popup-close')
        e.preventDefault();
    });
});

Jquery打开并关闭相同的按钮

5 个答案: