Javascript “导航窗格”在以下情况下展开；链接“；点击

我非常喜欢

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>

展开
扩展B
//如果单击“展开A”，则显示以下内容
//如果单击“展开B”，则显示以下内容

---

expandedA

和

expandedB

的宽度与

navigation

相同，它们将在

navigation

下方展开。类似于accordion，但我认为我需要修改它，使两个跨度具有相同的下拉列表。

使用使用innerHTML的javascript函数

例如：

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

使用onClick调用它

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

点击我！

用js小提琴更容易解释

JSFiddle：

编辑：我想这就是你想要的：

---

您应该将相关的HTML代码发布到网站上。我使用了您的JSFIDLE，并对其进行了一些更改，以更好地说明我的意思。这是可行的，但我不知道如何使它们在重新单击或单击其他类别时也崩溃。还有很多多余的代码：如果我有50多个可点击的东西呢？这将相当于几百行代码，所有代码都经过微小的调整重新使用。编辑刚刚捕捉到您的编辑，这正是我需要的，尽管它缺少一点技巧（如果消息包含几行HTML呢？），没问题。几行HTML仍然可能会有问题，但对于简单链接之类的情况，这不应该是太大的问题。