單擊時顯示/隱藏div，但是如果第二次單擊同一鏈接，則阻止腳本執行

Question

單擊任何鏈接時，該腳本可以正常工作。我希望它能夠防止顯示/隱藏腳本執行，如果再次單擊相同的鏈接。我在這個網站上發現了一些東西，其他人嘗試使用.unbind是最有前途的，但是我的功能是從$(this).click(function()開始的，而解除綁定會殺死所有的東西。我找不到一種重構代碼的方法，因此在單擊後點擊toggleDiv之前檢查toggleDiv以查看它們是否相同並刪除腳本。

Codepen：http://codepen.io/jpscoggan/pen/gcHbK

這裏是我的js代碼：

//show hide 
(function ($) { 

    $.fn.showHide = function (options) { 

     //default vars for the plugin 
     var defaults = { 
      speed: 200, 
      easing: 'swing' 
     }; 
     var options = $.extend(defaults, options); 

     $(this).click(function() { 
      $('.toggleDiv').slideUp(options.speed, options.easing); 
      // once the button is clicked, the clicked div (.toggleDiv) slides up 
      var toggleDiv = $(this).attr('rel'); 
      // reads rel attribute of clicked link/which div id to toggle 
      $(toggleDiv).slideToggle(options.speed, options.easing); 
      // toggle show/hide the correct div + speed and easing 

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

$('.show_hide').showHide({ 
    speed: 200, 
    // speed you want the toggle to happen    
}); 

Answer 1

一個簡單的方法去了解這一點：添加一個類你只點擊一個，然後禁止第二點擊如果鏈接已激活。

Codepen

$('.show_hide section').click(function() { 
    if ($(this).hasClass('active')) return false; 
    //use if you want to allow a click after switching sections 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

使用jQuery.one（）;功能。此函數的回調只能達到一次，並在通話後自動刪除：

$(this).one('click', clickHandlerFunction);