2013-08-22 90 views
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的;

} 
+0

如果使用'accordion'從* jQueryUI的*,只需設置'活躍option'到** **錯誤:http://api.jqueryui.com/accordion/#option-active – Dom

+0

@Dom他絕對沒有使用手風琴小部件。 –

+0

@KevinB希望他會轉換:-D – Dom

回答

0

這可能有幫助!你需要在載入時滑動它。

function($) { 
$.fn.extend({ 
    collapsiblePanel: function() { 
    // Call the ConfigureCollapsiblePanel function for the selected element 
    return $(this).each(ConfigureCollapsiblePanel); 
} 


}); 

$(".collapsibleContainerContent", $(this).parent()).slideUp(); 
})(jQuery);