jquery打開並關閉同一個按鈕

我有一個打開一個小窗口來顯示額外信息的按鈕。目前它只打開，我不得不點擊關閉按鈕關閉它，我真的不希望這個關閉按鈕，但我希望能夠打開和關閉它與同一個按鈕。jquery打開並關閉同一個按鈕

$(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(); 
    }); 
});

任何人都可以幫助我嗎？

來源

2016-07-29 All Day

因爲點擊事件綁定到當時存在的項目，所以應該使用事件委派。 –

也許你應該使用'.toggle'來代替。 –

@ DanielA.White懸停在日曆中的for循環中創建，它們可能會也可能不會被創建，具體取決於當天有多少事件，所以我需要它來綁定到項目。 –

嘗試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(); 
});

來源

2016-07-29 12:43:02 Harish

美麗，你明白了！我會盡快解決~5min，謝謝！ –

$('[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") 
     } 
    });

來源

2016-07-29 12:43:56 Tuhin

這對我來說似乎是更好的解決方案，因爲它將樣式中的打開/關閉邏輯解耦（可以在CSS中設置） – Carlo

你只需要瞭解，當你點擊，如果該層打開或關閉和後果的反應。

我已經使用$(..).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(); 
    }); 
});

來源

2016-07-29 12:44:13 Carlo

除了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(); 
});

來源

2016-07-29 12:44:40

我希望它應該是適合你的工作。

$(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(); 
    }); 
});

來源

2016-07-29 12:45:52

jquery打開並關閉同一個按鈕

回答

相關問題