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

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');
});