如何隐藏侧面板，使它们不会相互叠加

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

好吧，我仍然不确定你想要什么，但我把它分解为一个基本的布局，以使其更简单。这是小提琴。 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');
});