我有一个导航,我使用jQuery幻灯片显示导航下的内容。当你点击一个不同的导航项时,我得到了div来切换,但是当我点击相同的导航项来关闭它时,它只是将选项卡反弹然后再次打开。我在div里面有一个关闭按钮,暂时关闭它。
如果div打开后如何关闭div>
示例链接为here
我的jQuery如下:
(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('rel');
// 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: 300, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
答案 0 :(得分:0)
好吧,你在点击时向上滑动所有div,这意味着当前打开的div也会向上滑动。
$('.toggleDiv').slideUp(options.speed, options.easing);
我建议给已打开的div一个像“is_open”这样的类,你删除它 当你打开另一个div。在执行任何其他逻辑之前,您可以在单击时检查类:
if($(this).hasClass('is_open')) return;
答案 1 :(得分:0)
只需添加一个类即可完成操作,并避免使用$('。toggleDiv')选择器对所有div进行额外操作。
最简单的方法是检查toggleDiv是否可见。只需在类中将'display'属性从none更改为block就会有所帮助。
使用简单的$(this).addClass('opened_div');打开div并稍后删除它。