Question

所以我遇到了关于我的切换功能的问题。在我目前的情况下，我希望能够打开和关闭基于Web的界面的一部分（显示：无和阻止）。我从其中一个窗口开始工作，但我遇到的障碍是当我添加多个相同功能的调用时。我从使用getElementById恢复并使用了getElementsByClass。据我所知，这没有造成任何问题。当我添加第二个菜单但事情开始出现故障。

我会在下面粘贴我的代码和jsFiddle。

我的目标是让<li>上的onclick切换另一个<li>并同时切换地图/铯。

HTML

<div id="map">
    <nav id="primary_nav_wrap">
        <ul>
          <li><a href="#">=</a>
            <ul>
              <li><a class="buttonMap" href="#" onclick="toggleMap('none')">Toggle Map</a></li>
              <li><a class="buttonMap2" href="#" onclick="toggleMap('block')">Toggle Map</a></li>
              <li><a class="buttonCesium" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
              <li><a class="buttonCesium2" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
             </ul>
           </li>
        </ul>
    </nav>
</div>
<div id="cesium">
    <nav id="primary_nav_wrap">
        <ul>
          <li><a href="#">=</a>
            <ul>
              <li><a class="buttonMap" href="#" onclick="toggleMap('none')">Toggle Map</a></li>
              <li><a class="buttonMap2" href="#" onclick="toggleMap('block')">Toggle Map</a></li>
              <li><a class="buttonCesium" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
              <li><a class="buttonCesium2" href="#" onclick="toggleCesium('block')">Toggle Cesium</a></li>
            </ul>
          </li>
        </ul>
    </nav>

CSS（最小但是JsFiddle得到了重点）

#map{
  height:100px;
  width:100px;
  background-color:red;
}
#cesium{
  height:100px;
  width:100px;
  background-color:blue;
}

JS

function toggleMap(display) {
            var elem = document.getElementById("map");
            var buttonMap = document.getElementsByClassName("buttonMap");
            elem.style.display = display;
            buttonMap.style.display = display;
            if (buttonMap.style.display === 'none'){
                buttonMap2.style.display = 'block';
            }
            else if (buttonMap.style.display === 'block'){
                buttonMap2.style.display = 'none';
            }
};

function toggleCesium(display) {
            var elem = document.getElementById("cesium");
            var buttonCesium = document.getElementsByClassName("buttonCesium");
            elem.style.display = display;
            buttonCesium.style.display = display;
            if (buttonCesium.style.display === 'none'){
                buttonCesium2.style.display = 'block';
            }
            else if (buttonCesium.style.display === 'block'){
                buttonCesium2.style.display = 'none';
            }
};

在JsFiddle中，彩色块应该消失。

感谢任何帮助！

（PS！我们可以放心地假设用户将使用最新的浏览器）

Answer 1

https://jsfiddle.net/rz4wu4qd/18/ 评论中提到了一些有效的解决方案。 getElementsByClassName返回一个数组，因此您需要遍历它，例如使用for循环。

从多个实例切换类onlick

1 个答案: