Question

我正在使用this插件。当我点击链接显示隐藏的div时它工作正常，但是当我再次点击它时它无法关闭。此外，我正在使用它为多个div，它再次切换就好了，（意思是说，当我点击另一个链接时，当前div被替换为我刚刚点击的隐藏div）但是再次，它无法关闭。

这是我正在使用的脚本：

(function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // this var stores which button you've clicked
         var toggleClick = $(this);
         // this reads the rel attribute of the button to determine which div id to toggle
         var toggleDiv = $(this).attr('data-link');
         // here we toggle show/hide the correct div at the right speed and using which easing effect
         $(toggleDiv).slideToggle(options.speed, options.easing, function() {
         // this only fires once the animation is completed
         if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
         }
          });

      return false;

    });

};
})(jQuery);

我的索引中包含的脚本：

$(document).ready(function(){
$('.show_hide').showHide({           
    speed: 1000, 
    easing: '',
    changeText: 0, 
    showText: 'View',
    hideText: 'Close'

}); 
});

我的HTML：

<a href="#" class="show_hide" data-link="#hiddencontent"> Open hidden content </a>
<div id="hiddencontent" class="toggleDiv" style="display: none;"> hello </div>

任何人都知道如何解决这个问题？我不知道这是否相关，但我在Colorbox's内联内容中运行此内容。

Answer 1

试试这个：

var toggleDiv = $(toggleClick.attr('data-link'));

Answer 2

排除这样的目标：

$('.toggleDiv').not(toggleDiv).slideUp(options.speed, options.easing);

显示/隐藏插件正在显示但不隐藏内容onclick？

2 个答案:

SEE complete DEMO