我正在看看http://www.zenfolio.com/zf/features.aspx，當你點擊橙色鏈接時，我無法弄清楚他們是如何做手風琴風格的展開和摺疊。我一直在使用Firefox開發工具欄插件，但是我一直無法找到像JavaScript這樣的頁面源代碼中的任何東西，它將會執行以下操作。如果有人知道他們是怎麼做的，那會很有幫助。他們如何在以下網站上進行手風琴風格的下拉菜單？
這實際上是不相關的，但如果你所有的答案都很好，我該給誰答案呢？
他們將內部DIV上的.display CSS屬性從'none'設置爲''，它將呈現它。
這是一個有點棘手，因爲JS似乎是在這裏都這樣做：
http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.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 open」類展示了它的內容。所以這是一個非常愚蠢的迂迴方式來做每個人都做的事情（也就是說，處理onclick將隱藏div的顯示屬性更改爲非隱藏）。
編輯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; }
http://www.zenfolio.com/zf/script/en-US/safari3/windows/5AN2EHZJSZSGS/sitehome.js
是的，我只是看看它，看起來像一團糟。 – Xaisoft 2009-01-05 19:26:19
的腳本here。
相關的部分似乎是（重新奠定了）：
// This script seems over-complicated... I wouldn't recommend it!
zf_Features.prototype._init = function()
{
// Get a list of the H3 elements
var nodeList = this.dom().getElementsByTagName("H3");
// For each one...
for (var i = 0; i < nodeList.length; i++)
{
// ... set the onclick to be the function below
var onclick = this.eventHandler(this._entry_onclick, i);
// Get the first <a> within the H3 and do the same
var node = nodeList[i].getElementsByTagName("A")[0];
node.href = "#";
node.onclick = onclick;
// And again for the first <span>
node = nodeList[i].getElementsByTagName("SPAN")[0];
node.onclick = onclick;
}
};
zf_Features.prototype._entry_onclick = function(e, index)
{
// Get the parent node of the cell that was clicked on
var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;
// Keep going up the DOM tree until we find a <td>
while (cellNode.tagName != "TD")
cellNode = cellNode.parentNode;
// Collapse the currently open section if there is one
if (this._current != null)
this.dom(this._current).className = "desc";
if ("i" + index != this._current)
{
// Open the section we clicked on by changing its class
cellNode.className = "desc open";
cellNode.id = this.id + "-i" + index;
// Record this as the current one so we can close it later
this._current = "i" + index;
}
else
this._current = null;
// ???
zf_frame.recalcLayout();
return false;
};
編輯：增加了一些意見
它被用JavaScript來完成。
當你點擊一個鏈接時，父td的類從'desc'變爲'desc open'。基本上，擴展文本總是存在但隱藏（display：none;）。當它獲得'open'的css類時，文本不再被隱藏（display：block;）。
如果你看一下sitehome.js和sitehome.css文件，你可以瞭解他們是如何做到這一點的。
btw我用FireBug獲取該信息。儘管Web Developer Toolbar有一些功能重複，但值得安裝。
他們使用的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>
以上可以使用Jquery流暢淡入/淡出動畫顯示/擴展的描述時，可以寫入的功能。它也有一個SlideUp和Slidedown效果。
不幸的是他們的代碼在內襯和難以閱讀（http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js），但是這看起來很簡單的實現......東西沿着這些線路（使用prototypejs）：
<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>
它也緩存較早可擴展的元素，所以當你點擊一個新的元素時就會隱藏它。
使用jQuery，這種影響可以建very easily：
<span class="titleToggle">Show me</span>
<div style="display:none">This is hidden</div>
：
$('.titleToggle').click(function() {
$(this).next().toggle();
});
如果您在加載頁面執行這個代碼，那麼它將與看起來像以下任何標記工作請注意，此代碼可用於任意數量的元素，因此即使是包含這些項目的整個表格/列表，JavaScript代碼而不是也必須以任何方式進行重複或改編。標籤名稱（這裏是span和div）也不重要。使用最適合你的東西。
檢查出GWT中的StackPanel ... – Sathish 2009-01-05 19:30:40