jQuery切换弹回内容

时间:2014-03-17 14:37:53

标签: jquery toggle hide

我正在使用jQuery切换,当我点击“隐藏”链接时内容会反弹...有谁知道如何解决这个问题?

javascript:

             (function ($) {
              $.fn.showHide = function (options) {
        //default vars
        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);

函数调用:

<code>
jQuery(document).ready(function(){
   jQuery('.read-more-div').showHide({
        speed: 1000,
       easing: 'swing', 
        changeText: 1,
        showText: 'Read more...',
        hideText: 'Hide...'
    });
});
</code>

HTML:

    <p class="morelink"><a class="read-more-div" data-link="#dataid]" href="#">Read more...</a></p>
     <div id="dataid]"  class="toggleDiv">
     Content in here....
     </div>

当我点击隐藏时,有没有人知道为什么隐藏的div会一直反弹?任何帮助深表感谢!

谢谢:)

0 个答案:

没有答案