使用javascript获取与给定id最接近的元素

Question

我需要添加一个类与给定id最接近的div后，我点击它上面的div。下面的例子应该更能说明我需要什么。

<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
  <li>
    <div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
    <div id="menuContent" class="menuContent">
        <p>This</p>
        <p>That</p>
        <p>The Other</p>
    </div>
  </li>
  <li>
    <div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
    <div id="menuContent" class="menuContent">
        <p>This</p>
        <p>That</p>
        <p>The Other</p>
    </div>
  </li>
</ul>

这是我迄今为止的脚本，搜索给定元素的类名，并在单击时添加或删除'expandMenu'类。

<script>
function expandMenu(x) {
    var d = document.getElementById(x);
    var c = d.className;
    if (c.search("expandMenu") === -1) {
        d.className += " expandMenu";   
    } else {
        d.className = c.replace(" expandMenu","");
    }
}
</script>

这一切都工作得很好，问题是当点击'menuIcon'在第二个'li'，这是第一个'li'元素的脚本也适用-它显然只是找到第一个'menuContent'和应用className函数。

如何限制该函数仅适用于'menuContent'div，它直接在它之后。

我也不想用jQuery——老式的纯Javascript会很好。

Answer 1

为菜单图标提供唯一的id，并将该id传递给函数。切换基于id，而不是类。你是对的，它选择了第一个，因为它在运行代码时找到了它。

Answer 2

您不应该在多个元素上使用相同的id。尝试更改其中一个id并将新id传递给函数。

<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
  <li>
    <div class="menuIcon" onclick="expandMenu('menuContent1');">+</div>
    <div id="menuContent1" class="menuContent">
        <p>This</p>
        <p>That</p>
        <p>The Other</p>
    </div>
  </li>
  <li>
    <div class="menuIcon" onclick="expandMenu('menuContent2');">+</div>
    <div id="menuContent2" class="menuContent">
        <p>This</p>
        <p>That</p>
        <p>The Other</p>
    </div>
  </li>
</ul>