我正在使用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会一直反弹?任何帮助深表感谢!
谢谢:)