[英]How to add default collapse to jQuery
I am trying to edit another designer's jquery collapsiblePanel plugin. 我正在尝试编辑另一个设计师的jquery collapsiblePanel插件。 How would I add a default collapse?
如何添加默认折叠? When I load the html in my browser, the first panel is open by default and the rest or any others added are closed.
当我在浏览器中加载html时,默认情况下第一个面板处于打开状态,其余面板或添加的任何其他面板均处于关闭状态。 Ideally, I would like the first panel to be closed by default also.
理想情况下,我希望默认情况下也关闭第一个面板。 I have added other sections of code that I think relate to the JS.
我添加了我认为与JS相关的其他代码部分。 But honestly some of this is greek to me.
但老实说,这对我来说有些希腊。 Thank you for your time and assistance.
感谢您的时间和协助。
Here's the js... 这是js ...
(function($) {
$.fn.extend({
collapsiblePanel: function() {
// Call the ConfigureCollapsiblePanel function for the selected element
return $(this).each(ConfigureCollapsiblePanel);
}
});
})(jQuery);
function ConfigureCollapsiblePanel() {
$(this).addClass("ui-widget");
// Check if there are any child elements, if not then wrap the inner text within a new div.
if ($(this).children().length == 0) {
$(this).wrapInner("<div></div>");
}
// Wrap the contents of the container within a new div.
$(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");
// Create a new div as the first item within the container. Put the title of the panel in here.
$("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));
// Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
$(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
}
function CollapsibleContainerTitleOnClick() {
// The item clicked is the title div... get this parent (the overall container) and
toggle the content within it.
$(".collapsibleContainerContent", $(this).parent()).slideToggle();
}
Here is the script as I see it inside the HTML head... 这是我在HTML头中看到的脚本...
<script type="text/javascript">
<!--// Collapsible Program Content //-->
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0];
this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto';
c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?
1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight;
c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+
(Math.ceil(d/5)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'}
clearInterval(c.t)}
};
return{slider:slider}
}();
</script>
Here is the JS at the bottom of the page... 这是页面底部的JS ...
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);
</script>
Here is the CSS as it relates to the Collapsible Content... 这是与可折叠内容有关的CSS ...
/* --------------------------------------Collapsible Program Content---------------------------------*/ .collapsibleContainer{ border: solid 1px #9BB5C1; / * --------------------------------------可折叠的程序内容------- -------------------------- * / .collapsibleContainer {border:solid 1px#9BB5C1; font-size: 12px;
font-size:12px; width:100%;
宽度:100%; margin:5px 0;
边距:5px 0;
}
.collapsibleContainer:hover{
background-color:#efefef;
background-image:url(images/arrows_down.gif);
background-position:503px;
background-repeat:no-repeat;
color:#71b217;
}
.collapsibleContainerTitle{
font:14px;
font-weight:bold;
cursor:pointer;
color:233e8d;
}
.collapsibleContainerTitle div{
padding-top:5px;
padding-left:10px;
color:233e8d;
}
.collapsibleContainerContent{ padding: 10px; .collapsibleContainerContent {padding:10px;
}
This may help! 这可能会有所帮助! You need to slide it up on load.
您需要在加载时将其向上滑动。
function($) {
$.fn.extend({
collapsiblePanel: function() {
// Call the ConfigureCollapsiblePanel function for the selected element
return $(this).each(ConfigureCollapsiblePanel);
}
});
$(".collapsibleContainerContent", $(this).parent()).slideUp();
})(jQuery);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.