Question

我有一些SQL输出，可以格式化为可折叠的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'生成一个butteon，它会切换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');
                        });
                    }
                }
            });
        }

    });
});

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

2 个答案: