динамическое отображение/скрытие элементов управления div в php с js?

Question

У меня есть SQL-вывод, который id хотел бы форматировать в сворачиваемый div. Проблема в том, что все JS show/hide div, которые я нахожу, действительно не предназначены для динамических экземпляров, все они должны быть предварительно назначены определенному div. Поскольку мои результаты могут варьироваться от 1 до 30 ... это не очень хороший вариант.

Мой вопрос. Есть ли простой способ динамически генерировать команды show/hide для различного количества слоев?

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, если на то пошло).

Вам нужно всего лишь дать всем сгенерированным divs один и тот же класс и выбрать все из них и применить сворачиваемое поведение.

Это небольшой скрипт, написанный в mootools для одного из наших проектов и который может помочь вам в этом. Он извлекает все элементы с классами, которые начинаются с toggle_, а часть, которая появляется после подчеркивания, является идентификатором div, который должен управляться этим элементом управления.

Таким образом, вы генерировать butteon с классом «toggle_mydiv1», который будет переключать DIV с идентификатором «mydiv1»

Таким образом, вы можете генерировать столько элементов, сколько вы хотите и назначить поведение все из них с одного сценария.

Написано в 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'); 
         }); 
        } 
       } 
      }); 
     } 

    }); 
});