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

Question

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

“clickables”窗格有多个链接，当点击任何链接时，它会在下面展开以显示更多链接。因此，如果我点击链接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小提琴解释更容易

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

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