JQuery easyui accordion 单击再显示滚动条丢失问题

最新推荐文章于 2023-09-08 15:11:53 发布

tnjun123456

最新推荐文章于 2023-09-08 15:11:53 发布

阅读量4.6k

点赞数

分类专栏：前端脚本文章标签： jquery div float stylesheet 测试 scroll

本文链接：https://blog.csdn.net/tnjun123456/article/details/7200435

版权

前端脚本专栏收录该内容

17 篇文章 0 订阅

订阅专栏

方法：@设置$("#divLeft1").accordion({animate:false});

@添加<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Name Type Description Default

width     number           The width of accordion container.        auto
height      number           The height of accordion container.                                                               auto
fit          boolean    Set to true to set the accordion container size fit it's parent container.   false
border     boolean              Defines if to show the border.                                                                       true
animate boolean                Defines if to show animation effect when expand or collapse panel.       true

javacode：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
	 <title>jquery easy ui可折叠标签</title>
	 <link rel="stylesheet" type="text/css" href="../sources/themes/default/easyui.css">
	 <link rel="stylesheet" type="text/css" href="../sources/themes/icon.css">
	 <script type="text/javascript" src="../sources/jquery-1.7.1.min.js"></script>
	 <script type="text/javascript" src="../sources/jquery.easyui.min.js"></script>
	 <style type="text/css">
	     .divLeft{float:left;}
	     .divRight{float:right;}
	 </style>
	 <script type="text/javascript">
	      $(function(){
    	          $("#divLeft1").accordion({width:300,height:200,fit:false,animate:false});
    	          $("#divRight1").accordion({width:300,height:200,fit:false});
		   $("#divLeft2").accordion({width:300,height:200,fit:false});
    	          $("#divRight2").accordion({width:300,height:200,fit:false});
	      });
	 </script>
    </head>
    <body>
    <div id="divMain">
    <div  class="divLeft">
        <div id="divLeft1">
	     <div title="divLeft1Title1" selected="true" style="overflow:auto;padding:10px;">
		   <p>Left1:这是折叠标签的第一个标签<br/>
			测试效果<br/>
			测试了float、overflow、padding和icon属性<br/>
			测试各个属性的效果<br>
			其中float是（布局）定制对象是浮动在左边或者右边或者不浮动<br/>
			padding是（内补丁）设置四边边距<br/>
			overflow是（布局）检索或设置当对象的内容超过其指定高度及宽度时如何管理内容<br/>
			overflow第一个是auto，第二个是visible,第三个是hidden，第四个是scroll
		   </p>
	     </div>
	     <div title="divLeft1Title2">
		   <p>这是折叠标签的第二个标签</p>
	     </div>
	     <div title="divLeft1Title3">
		   <p>这是折叠标签的第三个标签</p>
	     </div>
	 </div>
	 <br/><br/><br/><br/>
        <div id="divLeft2">
	     <div title="divLeft2Title1" selected="true" style="overflow:visible;padding:10px;">
		   <p>Left1:这是折叠标签的第一个标签<br/>
			测试效果<br/>
			测试了float、overflow、padding和icon属性<br/>
			测试各个属性的效果<br>
			其中float是（布局）定制对象是浮动在左边或者右边或者不浮动<br/>
			padding是（内补丁）设置四边边距<br/>
			overflow是（布局）检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
		   </p>
	     </div>
	     <div title="divLeft2Title2">
		   <p>这是折叠标签的第二个标签</p>
	     </div>
	     <div title="divLeft2Title3">
		   <p>这是折叠标签的第三个标签</p>
	     </div>
	 </div>
	 </div>
	 <!-- ------------------------------------------------------------------------------ -->
	 <div  class="divRight">
	 <div id="divRight1">
	     <div title="divRight1Title1" selected="true" style="overflow:hidden;">
		   <p>Left1:这是折叠标签的第一个标签<br/>
			测试效果<br/>
			测试了float、overflow、padding和icon属性<br/>
			测试各个属性的效果<br>
			其中float是（布局）定制对象是浮动在左边或者右边或者不浮动<br/>
			padding是（内补丁）设置四边边距<br/>
			overflow是（布局）检索或设置当对象的内容超过其指定高度及宽度时如何管理内容<br/>
			右边的两个没有设置padding<br/>
		   </p>
	     </div>
	     <div title="divRight1Title2">
		   <p>这是折叠标签的第二个标签</p>
	     </div>
	     <div title="divRight1Title3">
		   <p>这是折叠标签的第三个标签</p>
	     </div>
	 </div>
	 <br/><br/><br/><br/>
	 <div id="divRight2">
	     <div title="divRight2Title1" selected="true" icon="icon-save" style="overflow:scroll;">
		   <p>Left1:这是折叠标签的第一个标签<br/>
			测试效果<br/>
			测试了float、overflow、padding和icon属性<br/>
			测试各个属性的效果<br>
			这个overflow是scroll
		   </p>
	     </div>
	     <div title="divTitle2" icon="icon-ok">
		   <p>这是折叠标签的第二个标签</p>
	     </div>
	     <div title="divRight2Title3" icon="icon-reload">
		   <p>这是折叠标签的第三个标签</p>
	     </div>
	 </div>
    </div>
    </div>
    </body>
</html>

去掉第一行再看效果