Question

我点击上面的div后，我需要将一个类添加到具有给定id的最近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>

这一切都运行正常，问题是当点击第二个'li'中的'menuIcon'时，它也是脚本应用的第一个'li'元素 - 它显然只是找到第一个'menuContent'并应用它的className函数。

如何将函数限制为仅应用于其后面的'menuContent'div。

我也不想使用jQuery - 好的'简洁的Javascript会很棒。

Answer 1

您不应该在多个元素上使用相同的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>

Answer 2

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

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

2 个答案: