单击“链接”时，导航窗格在下方展开

Question

我真的很喜欢 div 手风琴效果，我经常将它用于网站组织和导航，但我想尝试将它用于水平导航窗格而不是垂直列表。

“可点击”窗格有多个链接，当点击任何一个链接时，它会在下方展开以显示更多链接。因此，如果我单击链接 A，它将展开以显示链接 A.A、A.B、A.C 等；如果我单击链接 B，它将对链接 B.A、B.B 等执行相同的操作。我希望下部窗格是动态的，并显示与我在可点击窗格中单击的链接相关的链接，如图所示。我松散地使用“链接”这个词；在链接窗格中，它们确实是超链接，但在可点击窗格中，它们只是可点击的单词，在点击时执行操作。

我该怎么做呢？我最初尝试过 AJAX 手风琴，但间距全错了。我对 AJAX 或 jQuery 不够精通，无法使其按我想要的方式工作，所以我希望有一些关于如何做到这一点的提示。

这里有一些临时的 HTML 来说明我想要完成的事情。

<div id="navigation">
    <span id="A">Expand A</span> &nbsp; 
    <span id="B">Expand B</span>
</div>
//if "Expand A" is clicked, display the below
<div id="expandedA">
    <a href="./link1.php">Link 1</a> &nbsp;
    <a href="./link2.php">Link 2</a>
</div>
//if "Expand B" is clicked, display the below
<div id="expandedB">
    <a href="./link3.php">Link 3</a> &nbsp;
    <a href="./link4.php">Link 4</a>
</div>

expandedA 和 expandedB 将具有与 navigation 相同的宽度，并且它们将在 navigation 下方扩展。类似于手风琴的东西，但我认为我需要对其进行修改，以便两个跨度具有相同的下拉菜单。

Answer 1

使用一个使用innerHTML 的javascript 函数。

例如：

function clickable(){
    document.getElementById('clickable').innerHTML = "content";
}

使用onClick来调用它

<div id="click" onClick="javascript:clickable();">Click me!</div>

用 js fiddle 更容易解释

JSFiddle： http://jsfiddle.net/rJ3KS/

编辑：我认为这就是你想要的： http://jsfiddle.net/rJ3KS/1/