Javascript 他们是如何在下面的网站上做手风琴风格的下拉列表的？

我正在看，我不知道他们是如何做的手风琴风格展开和折叠时，你点击橙色链接。我一直在使用firefox的WebDeveloper工具栏插件，但在页面的源代码中找不到任何类似JavaScript的东西可以执行以下操作。如果有人知道他们是怎么做的，那将非常有帮助

---

这实际上是不相关的，但是如果你所有的答案都是好的，那么我也应该给谁答案呢？

他们正在将内部DIV的.display CSS属性从“none”设置为“”，从而呈现它

这有点棘手，因为JS似乎就在这里：

但基本上每个人都是这样做的。就在那里的某个地方

编辑：在这里，它看起来像：

//... (bunch of junk)
 zf_Features.prototype._entry_onclick = function(e, index) 
{
    var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;
    while (cellNode.tagName != "TD") cellNode = cellNode.parentNode; 
    if (this._current != null) this.dom(this._current).className = "desc";
    if ("i" + index != this._current) 
    {
        cellNode.className = "desc open";
        cellNode.id = this.id + "-i" + index;
        this._current = "i" + index;
    } 
    else this._current = null;
    zf_frame.recalcLayout();
    return false;
};

基本上，他们所做的是一种非常迂回和混乱的方式，将TD内部的div类“desc”更改为类“desc open”，从而显示其内容。因此，这是一种非常笨拙的迂回方式，可以完成每个人都会做的事情（即，处理onclick将隐藏div的display属性更改为non-hidden）

编辑2：

---

哈哈，当我试图格式化它时，其他人也发现了它。=）你比我快；）

他们的主JS中有很多模糊/缩小的JS。看起来他们正在抓取DOM以查找H3，并使用类desc检查表单元格，然后处理A标记。（或其他一些顺序，可能），然后动态添加onclick处理程序

if (this._current != null) this.dom(this._current).className
= "desc"; if ("i" + index != this._current) { cellNode.className = "desc open"; cellNode.id = this.id
+ "-i" + index; this._current = "i" + index; }

脚本是

相关部分似乎（重新布置）：

//这个脚本似乎太复杂了。。。我不推荐它！
zf_Features.prototype._init=function（）
{
//获取H3元素的列表
var nodeList=this.dom（）.getElementsByTagName（“H3”）；
//对于每一个。。。
对于（变量i=0；i

---

编辑：添加了一些注释

这是用JavaScript完成的

单击链接时，父td的类将从“desc”更改为“desc open”。基本上，展开的文本始终存在但隐藏（display:none；）。当它获得css类“open”时，文本不再被隐藏（display:block；）

如果查看sitehome.js和sitehome.css文件，您可以了解他们是如何做到这一点的

---

顺便说一句，我用FireBug获得了这些信息。尽管WebDeveloper工具栏有一些功能重复，但安装还是值得的。

他们使用的是javascript。你也可以这样做：

<div id="feature">
    <a href="javascript:toggle();">Feature Name</a>

    <div id="desc" style=="display:none;">
     description here...
    </div>
</div>

<script type="text/javascript">
function toggle()
{
   var el=document.getElementById('desc');
   if (el.style.display=='none')
      el.style.display='block'; //show if currently hidden
   else
      el.style.display='none'; //Hide if currently displayed
}
</script>

描述在这里。。。
函数切换（）
{
var el=document.getElementById（'desc'）；
如果（el.style.display=='none'）
el.style.display='block'；//显示当前是否隐藏
其他的
el.style.display='none'；//如果当前显示则隐藏
}

---

在显示/扩展描述时，可以使用平滑淡入/淡出动画编写上述函数。它还具有SlideUp和Slidedown效果。

不幸的是，他们的代码是有线条的，难以阅读（），但这看起来很容易实现。。。大致如下（使用prototypejs）：

var showHide={
cachedExpandable:null
，init:function（）{
var containers=$$（“.container”）；
对于（var i=0，可点击；i使用，可建立此效果：

如果在加载页面时执行此代码，则该代码将与任何如下所示的标记一起使用：

<span class="titleToggle">Show me</span>
<div style="display:none">This is hidden</div>

给我看看
这是隐藏的

请注意，此代码适用于任意数量的元素，因此，即使对于包含这些项的整个表/列表，JavaScript代码也不必以任何方式重复或修改。标记名（此处
span
和
div
）也没关系。用最适合你的方法。
是的，我刚看了一下，看起来很混乱。是的，用JQuery看起来会简单得多。我不是一个真正的javascript爱好者，所以很难理解这个问题。我应该给谁答案呢？似乎每个人都是对的？我，因为我在：pIn上付出了最大的努力恰巧，这是一个很好的例子，说明了现在不使用JavaScript框架是多么愚蠢。Konrad，因为你有很多声誉，这里的每个人都给出了很好的答案，我该如何决定给谁答案？请查看GWT中的StackPanel。。。
<script>
var showHide = {
    cachedExpandable: null
    ,init: function() {
        var containers = $$(".container"); 
        for(var i=0, clickable; i<containers.length; i++) {
            clickable = containers[i].getElementsByClassName("clickable")[0];
            Event.observe(clickable, "click", function(e) {
                Event.stop(e);
                showHide.doIt(containers[i]);
            });
        }
    }
    ,doIt: function(container) {
        if(this.cachedExpandable) this.cachedExpandable.hide();
        var expandable = container.getElementsByClassName("expandable")[0];
        if(expandable.style.display == "none") {
            expandable.show();
        } else {
            expandable.hide();
        }
        this.cachedExpandable = expandable;
    }

};

window.onload = function() {
    showHide.init();
};
</script>

<div class="container">
    <div class="clickable">
        Storage Space
    </div>
    <div class="expandable" style="display: none;">
        Description for storage space
    </div>
</div>

<div class="container">
    <div class="clickable">
        Galleries
    </div>
    <div class="expandable" style="display: none;">
        Description for galleries
    </div>
</div>

$('.titleToggle').click(function() {
    $(this).next().toggle();
});

<span class="titleToggle">Show me</span>
<div style="display:none">This is hidden</div>