動態顯示/隱藏div與js的PHP控制？

Question

我有一些SQL輸出的id喜歡格式化爲可摺疊的div。問題是，我發現所有的JS顯示/隱藏div代碼並不是真正意義上的動態實例，它們都需要預先分配給特定的div。由於我的結果可能會從1-30變化...這不是一個很好的選擇。

我的問題。是否有一種簡單的方法來爲不同數量的圖層動態生成顯示/隱藏控件？

Answer 1

<div id="CollapsiblePanel1" class="CollapsiblePanel"> 
    <div class="CollapsiblePanelTab" tabindex="0">Tab</div> 
    <div class="CollapsiblePanelContent">Content</div> 
</div> 
<script type="text/javascript"> 
<!-- 
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1"); 
//--> 
</script> 

Answer 2

它實際上很容易與mootools（或jQuery的事情）。

您只需要爲所有生成的div提供相同的類並選擇所有這些類並應用可摺疊行爲。

這是一個用mootools編寫的用於我們項目之一的小腳本，可能會幫助您解決問題。它獲取以toggle_開頭的類的所有元素，並且下劃線之後的部分是該控件應該摺疊的div的id。

所以你生成類的toggle_mydiv1「這將觸發一個div id爲「爲myDiv1」

這樣，只要你想，你可以產生儘可能多的元素，並用一個腳本分配行爲，向他們的butteon。

寫在mootools的：

window.addEvent('domready', function(){ 

    var clickAbles = $$('form[class^=toggle_]'); 
    clickAbles.each(function(el){ 
     var _class = el.get('class').split(' '); 
     var clickElement = _class[0].replace('toggle_',''); 
     clickElement = $$('ul.buttons li.'+clickElement+' a'); 

     if(clickElement){ 

      var myFx = new Fx.Tween(el,{duration: 'long'}); 
      var myFx2 = new Fx.Tween(el,{duration: 'long'}); 
      el.store('height', el.getSize().y); 
      el.store('state', 'close'); 
      el.setStyles({'display': 'none', 'height': 0}); 

      var todoLists = el.getElements('ul.todo_list'); 
      clickElement.addEvent('click', function(e){ 
       e.stop(); 

       if(el.retrieve('state') == "close"){ 
        el.setStyle('display','block'); 
        myFx.start('height', [0,el.retrieve('height')]); 

        myFx.addEvent('complete', function(){ 
         todoLists.setStyles({'overflow': 'auto'}); 
         el.store('state', 'open'); 
        }); 
       } else { 
        if(el.retrieve('state') == "open"){ 
         myFx2.start('height', [el.retrieve('height'),0]); 
         myFx2.addEvent('complete', function(){ 
          el.setStyles({'display': 'none', 'height': 0}); 
          todoLists.setStyles({'overflow': 'hidden'}); 
          el.store('state', 'close'); 
         }); 
        } 
       } 
      }); 
     } 

    }); 
});