0

我正在尝试编辑另一个设计师的 jquery collapsiblePanel 插件。我将如何添加默认折叠？当我在浏览器中加载 html 时，默认情况下第一个面板是打开的，其余的或添加的任何其他面板都是关闭的。理想情况下，我希望第一个面板也默认关闭。我添加了我认为与 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();
}

这是我在 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{ 边框：solid 1px #9BB5C1; 字体大小：12px；宽度：100%；边距：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;

}
4

1 回答 1

0

这可能会有所帮助！您需要在加载时将其向上滑动。

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


});

$(".collapsibleContainerContent", $(this).parent()).slideUp();
})(jQuery);
于 2013-08-22T15:08:19.947 回答