IE6 Pain ... jQuery Show/Hide插件 [英] IE6 Pain...jQuery Show / Hide Plugin

问题描述

我正在尝试实现jQuery Show/Hide插件

我已经尽力纠正了这个问题，但是在IE6上却无法正常工作，因为它在其他浏览器上就像一个魅力.

插件

I am trying to implement jQuery Show / Hide Plugin

I have tried enough to rectify the problem, but it doesn''t work on IE6, where as it works like a charm on other browsers.

plugin

(function ($) {
02	    $.fn.showHide = function (options) {
03	 
04	    //default vars for the plugin
05	        var defaults = {
06	            speed: 1000,
07	            easing: '',
08	            changeText: 0,
09	            showText: 'Show',
10	            hideText: 'Hide',
11	 
12	        };
13	        var options = $.extend(defaults, options);
14	 
15	        $(this).click(function () {
16	             // this var stores which button you've clicked
17	             var toggleClick = $(this);
18	             // this reads the rel attribute of the button to determine which div id to toggle
19	             var toggleDiv = $(this).attr('rel');
20	             // here we toggle show/hide the correct div at the right speed and using which easing effect
21	             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
22	             // this only fires once the animation is completed
23	             if(options.changeText==1){
24	             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
25	             }
26	              });
27	 
28	          return false;
29	 
30	        });
31	 
32	    };
33	})(jQuery);

用法

The usage

$(document).ready(function(){
02	 
03	   $('.show_hide').showHide({
04	        speed: 1000,  // speed you want the toggle to happen
05	        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
06	        changeText: 1, // if you dont want the button text to change, set this to 0
07	        showText: 'View',// the button text to show when a div is closed
08	        hideText: 'Close' // the button text to show when a div is open
09	 
10	    });
11	 
12	});

HTML

HTML

01	<a href="#" class="show_hide" rel="#slidingDiv">View</a><br />
02	   <div id="slidingDiv" style="display:none;">
03	       Fill this space with really interesting content.
04	   </div>
05	 
06	<a href="#" class="show_hide" rel="#slidingDiv_2">View</a><br />
07	   <div id="slidingDiv_2" style="display:none;">
08	       Fill this space with really interesting content.
09	   </div>

CSS

CSS

<style>

body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}

#slidingDiv, #slidingDiv_2{
	height:300px;
	background-color: #99CCFF;
	padding:20px;
	margin-top:10px;
	border-bottom:5px solid #3399FF;
	display:none;
	
}



</style>

如果我将显示更改为阻止-它会一直显示内容，并且在单击按钮时不会显示，而在单击按钮时会隐藏内容.
我认为这是css的问题..

有解决此烦人问题的想法吗?

谢谢

If i change the display to block - it displays the content all the time and doesn''t display when button is clicked or hide it when the button is clicked.
I think it''s a css issue than anything else..

Any ideas to fix this annoying issue?

Thanks

推荐答案

){ 02

.fn.showHide = 功能(选项){ 03 04 // 插件的默认变量 05 var 默认值= { 06 速度: 1000 ， 07 缓动:' '， 08 changeText: 0 ， 09 showText:' Show'， 10 hideText:' 隐藏'， 11 12 }; 13 var options =

.fn.showHide = function (options) { 03 04 //default vars for the plugin 05 var defaults = { 06 speed: 1000, 07 easing: '', 08 changeText: 0, 09 showText: 'Show', 10 hideText: 'Hide', 11 12 }; 13 var options =

.extend(默认值，选项) ; 14 15

.extend(defaults, options); 14 15

这篇关于IE6 Pain ... jQuery Show/Hide插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！