用js在php中动态显示/隐藏div控件？

Question

我有一些SQL输出，我想格式化成一个可折叠的div。问题是我找到的所有显示/隐藏div的JS代码都不是真正用于动态实例的，它们都需要预先分配给特定的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提供相同的类，并选择所有这些div，然后应用可折叠行为。

这是一个用mootools为我们的一个项目编写的小脚本，可能会让你上路。它获取所有带有以toggle_开头的类的元素，下划线后面的部分是这个控件应该折叠的div的id。

因此，您将使用'toggle_mydiv1‘类生成一个按钮，该按钮将切换id为'mydiv1’的div

通过这种方式，您可以生成任意数量的元素，并使用一个脚本为所有元素分配行为。

用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');
                        });
                    }
                }
            });
        }

    });
});