Jqueryを開いて同じボタンで閉じる

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')を使用しましたが、シナリオに最適な機能を見つける必要があります。

のような何か.. fadeToggle()方法のほかに

$(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

は、あなたはボックスが表示かそうでないかどうかを知ることができます。

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