0
我想編輯另一個設計器的jquery collapsiblePanel插件。我將如何添加一個默認的崩潰?當我在我的瀏覽器中加載html時,默認打開第一個面板,其餘或其他添加的其他面板都關閉。理想情況下,我希望第一個面板默認關閉。我已經添加了我認爲與JS有關的其他代碼段。 但說實話,這是我希臘的一部分。感謝您的時間和協助。如何添加默認崩潰到jQuery
這裏的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();
}
這裏是劇本,我看到它的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>
這裏是JS在頁面的底部...
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);
</script>
這裏是CSS,因爲它涉及到可摺疊內容...
/* - ------------------------------------可摺疊的程序內容----------- ---------------------- */ .collapsibleContainer { border:solid 1px#9BB5C1; font-size:12px; 寬度:100%; margin: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 { 填充:10px的;
}
如果使用'accordion'從* jQueryUI的*,只需設置'活躍option'到** **錯誤:http://api.jqueryui.com/accordion/#option-active – Dom
@Dom他絕對沒有使用手風琴小部件。 –
@KevinB希望他會轉換:-D – Dom