javascript - 如何隐藏侧面板，使它们不相互重叠

Question

我有 4 个侧面板，当我点击相应的按钮时它们会相互重叠。如何在另一个打开时隐藏一个？

这是触发面板的菜单:

    <div id="resources-menu-main">
    <ul>
    <li id="toc-main-button"><a href="#toc-beginning" onclick="showLeftPanel();"><img src="gfx/toc.png" width="50" alt="Table of Contents"></a></li>
    <li id="footnotes-main-button"><a href="#footnotes-section" onclick="showFootnotesPanel();"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></a></li>
    <li id="references-main-button"><a href="#references-section" onclick="showReferencesPanel();"><img src="gfx/references.png" width="50" alt="References"></a></li>
    <li id="images-main-button"><a href="#images-section" onclick="showImagesPanel();"><img src="gfx/images.png" width="50" alt="Images"></a></li>
    <li id="information-main-button"><a href="#information-section" onclick="showInformationPanel();"><img src="gfx/info.png" width="50" alt="Information"></a></li>
   </ul>
   </div>

这是其中一个侧面板(其中有另一个菜单以方便导航):

    <div id="footnotes-section">
    <a href="#" onclick="showFootnotesPanel();" class="controller">&lt;</a>
    <hr id="line">
    <h3>Resources<br/><br/></h3>
    <div id="resources-menu-panel">
    <ul>
    <li id="footnotes-panel-button"><a href="#footnotes-section" onclick="showFootnotesPanel();"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></a></li>
    <li id="references-panel-button"><a href="#references-section" onclick="showReferencesPanel();"><img src="gfx/references.png" width="50" alt="References"></a></li>
    <li id="images-panel-button"><a href="#images-section" onclick="showImagesPanel();"><img src="gfx/images.png" width="50" alt="Images"></a></li>
    <li id="information-panel-button"><a href="#information-section" onclick="showInformationPanel();"><img src="gfx/info.png" width="50" alt="Information"></a></li>
    </ul>
   </div>

   <hr id="line">
   <details open>
   <summary><h4><img src="gfx/footnotes.png" width="50" alt="Footnotes"><br/>Footnotes</h4></summary>
   [content]
   <h4><a href="#resources-menu">&uarr; Volver</a></h4>
   </details>
   </div>

这是对应侧面板的js函数:

    function showFootnotesPanel() {
    var elem = document.getElementById("footnotes-section");
    if (elem.classList) {
    console.log("classList supported");
    elem.classList.toggle("show");
    } else {
    var classes = elem.className;
    if (classes.indexOf("show") >= 0) {
      elem.className = classes.replace("show", "");
    } else {
      elem.className = classes + " show"; 
    }
    console.log(elem.className);
    }
    }

谢谢!

Answer 1

好的，我仍然不确定您想要什么，但我将其分解为一个基本布局以使其更简单。这是它的 fiddle 。 http://jsfiddle.net/wvoa69r5/1/

基本上你显示你想要的 div，然后像这样隐藏之前显示的 div:

$('#link1').click(function() {
  var left = $('#left-div1');
  var leftShow = $('.left-div.show');
  left.addClass('show');
  leftShow.removeClass('show');
});