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{ border: 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 に答える