javascript - 隐藏打开的面板onclick

Question

下面是我尝试使用 HTML、CSS 和 JavaScript 创建的字母索引的代码。单击另一个字母时是否可以关闭字母面板？示例:单击“A”会出现 A 面板，但当您单击“B”时，会出现 B 面板并且 A 面板保持可见。单击不同的字母时是否有关闭“A”面板的方法？任何帮助，干杯。

function myFunctionA() {
    document.getElementById("panelA").style.display = "block";
}
function myFunctionB() {
    document.getElementById("panelB").style.display = "block";
}
function myFunctionC() {
    document.getElementById("panelC").style.display = "block";
}

.alphabet {
    list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
    float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
    border-right: none;
}

.alphabet li:hover {
    color:#005bab;
    background-color: lightgrey;
}

#panelA, #panelB, #panelC {
    display: none;
}
#panelA, #panelB, #panelC, .flip {
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}

<div>
<ul class="alphabet">
                        <li class="flip" onclick="myFunctionA()">A</li>
                        <li class="flip" onclick="myFunctionB()">B</li>
                        <li class="flip" onclick="myFunctionC()">C</li>
                        <li>D</li>
                         <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>V</li>
                        <li>W</li>
                        <li>X</li>
                        <li>Y</li>
                        <li>Z</li>
                    </ul>
  </div>
<br/>
<div id="panelA">
  <p>A</p>
</div>
<div id="panelB">
  <p>B</p>
</div>
<div id="panelC">
  <p>C</p>
</div>

Answer 1

我们实际上根本不需要任何 JavaScript 来执行此操作(但是，我在下面提供了一个 JavaScript 解决方案)。相反，我们可以利用 CSS :target 伪类选择器，它影响作为导航目标的元素(通常是文档中的 # 位置)。它确实需要更多的 HTML，并且不允许在第二次单击时关闭面板，但最终没有 JavaScript，因此效率更高。

看看:

.alphabet {
        list-style-type: none;
        margin:0 auto 0;
        padding:0;
        cursor: pointer;
        width:100%;
        text-align:center;
}

.alphabet li {
        float:left;
        margin:0;
        padding:0;
        border-right:1px solid darkgrey;
        font-size: 13px;
        font-family:Verdana;
        color:black;
        display:inline-block;
        box-sizing:border-box;
        width:3.84%;
}

.alphabet li:last-child {
        border-right: none;
}

.alphabet li:hover {
        color:#005bab;
        background-color: lightgrey;
}
    
    /* ******************************************************************************** */
    
    a { text-decoration:none; }
    
    /* By default, don't show any panel */
    .flip > div.panel { display:none; }    

    /* This style will only be applied when a click to a target element occurs and
       it will affect the target element. */    
    div.panel:target {
      display:block;
      position:absolute;
      left:0;
      width:100%;
    }

    /* For the <li> and only the panel to be shown: */
    .flip, div.panel:target {
        display: block;
        font-size: 16px;
        text-align: center;
        background-color:#fcfcfc;
        border:1px solid grey;
        color: black;
    }
    
    /* ******************************************************************************** */

<ul class="alphabet">
      <li class="flip"><a href="#panelA">A</a><div id="panelA" class="panel"><p>A</p></div></li>
      <li class="flip"><a href="#panelB">B</a><div id="panelB" class="panel"><p>B</p></div></li>
      <li class="flip"><a href="#panelC">C</a><div id="panelC" class="panel"><p>C</p></div></li> 
      <li class="flip"><a href="#panelD">D</a><div id="panelD" class="panel"><p>D</p></div></li>
      <li class="flip"><a href="#panelE">E</a><div id="panelE" class="panel"><p>E</p></div></li>
      <li class="flip"><a href="#panelF">F</a><div id="panelF" class="panel"><p>F</p></div></li>   
      <li class="flip"><a href="#panelG">G</a><div id="panelG" class="panel"><p>G</p></div></li>
      <li class="flip"><a href="#panelH">H</a><div id="panelH" class="panel"><p>H</p></div></li>
      <li class="flip"><a href="#panelI">I</a><div id="panelI" class="panel"><p>I</p></div></li> 
      <li class="flip"><a href="#panelJ">J</a><div id="panelJ" class="panel"><p>J</p></div></li>
      <li class="flip"><a href="#panelK">K</a><div id="panelK" class="panel"><p>K</p></div></li>
      <li class="flip"><a href="#panelL">L</a><div id="panelL" class="panel"><p>L</p></div></li> 
      <li class="flip"><a href="#panelM">M</a><div id="panelM" class="panel"><p>M</p></div></li>
      <li class="flip"><a href="#panelN">N</a><div id="panelN" class="panel"><p>N</p></div></li>
      <li class="flip"><a href="#panelO">O</a><div id="panelO" class="panel"><p>O</p></div></li> 
      <li class="flip"><a href="#panelP">P</a><div id="panelP" class="panel"><p>P</p></div></li>
      <li class="flip"><a href="#panelQ">Q</a><div id="panelQ" class="panel"><p>Q</p></div></li>
      <li class="flip"><a href="#panelR">R</a><div id="panelR" class="panel"><p>R</p></div></li> 
      <li class="flip"><a href="#panelS">S</a><div id="panelS" class="panel"><p>S</p></div></li> 
      <li class="flip"><a href="#panelT">T</a><div id="panelT" class="panel"><p>T</p></div></li>
      <li class="flip"><a href="#panelU">U</a><div id="panelU" class="panel"><p>U</p></div></li>
      <li class="flip"><a href="#panelV">V</a><div id="panelV" class="panel"><p>V</p></div></li>
      <li class="flip"><a href="#panelW">W</a><div id="panelW" class="panel"><p>W</p></div></li>
      <li class="flip"><a href="#panelX">X</a><div id="panelX" class="panel"><p>X</p></div></li> 
      <li class="flip"><a href="#panelY">Y</a><div id="panelY" class="panel"><p>Y</p></div></li> 
      <li class="flip"><a href="#panelZ">Z</a><div id="panelZ" class="panel"><p>Z</p></div></li>
    </ul>

JavaScript 解决方案:

例如，如果我们设置一个名为“show”的类，我们可以根据需要应用它，也可以使用 element.classList.toggle() 将其取走。 方法。如果所有面板都默认隐藏，则取消“显示”类会导致样式恢复为默认值。

此外，通过重新组织 HTML 结构并对 CSS 进行一些细微的更改，我们可以显着简化 JavaScript。

最后(仅供引用)，您拥有的 vendor 前缀 CSS (-moz-box-sizing: border-box;) 可以全部删除，因为 box-sizing所有现代浏览器都得到了很好的支持。

// Get a "live" collection of all the open panels
var panels = document.getElementsByClassName("show");

// Get all the <li> elements into a collection and loop through them
Array.prototype.slice.call(document.querySelectorAll(".alphabet > li")).forEach(function(item){
  // Set each up to have a click event handler
  item.addEventListener("click", function(e){

    // Hide any previously opened panels exept the current one (if already opened)
    Array.prototype.slice.call(panels).forEach(function(pan){
      e.target.querySelector("div.panel") !== pan ? pan.classList.remove("show"): "";
    });

    // find the panel in the <li> and toggle its display
    item.querySelector("div.panel").classList.toggle("show");

  });
});

.alphabet {
    list-style-type: none;
    margin:0px auto 0;
    padding:0;
    cursor: pointer;
    width:100%;
    text-align:center;
}

.alphabet li {
    float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    font-family:Verdana;
    color:black;
    display:inline-block;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
    border-right: none;
}

.alphabet li:hover {
    color:#005bab;
    background-color: lightgrey;
}

/* By default, don't show any panel */
.flip > div { display:none; }

/* For the <li> and only the panel to be shown: */
.flip, div.show {
    display: block;
    font-size: 16px;
    text-align: center;
    background-color:#fcfcfc;
    border-style:solid;
    border-width:1px;
    border-color:grey;
    color: black;
    margin: auto;
}

/* For the panel to be shown, position it correctly. */
div.show {
    position:absolute;
    left:0;
    width:100%;
}

<ul class="alphabet">
  <li class="flip">A<div class="panel"><p>A</p></div></li>
  <li class="flip">B<div class="panel"><p>B</p></div></li>
  <li class="flip">C<div class="panel"><p>C</p></div></li> 
  <li class="flip">D<div class="panel"><p>D</p></div></li>
  <li class="flip">E<div class="panel"><p>E</p></div></li>
  <li class="flip">F<div class="panel"><p>F</p></div></li>   
  <li class="flip">G<div class="panel"><p>G</p></div></li>
  <li class="flip">H<div class="panel"><p>H</p></div></li>
  <li class="flip">I<div class="panel"><p>I</p></div></li> 
  <li class="flip">J<div class="panel"><p>J</p></div></li>
  <li class="flip">K<div class="panel"><p>K</p></div></li>
  <li class="flip">L<div class="panel"><p>L</p></div></li> 
  <li class="flip">M<div class="panel"><p>M</p></div></li>
  <li class="flip">N<div class="panel"><p>N</p></div></li>
  <li class="flip">O<div class="panel"><p>O</p></div></li> 
  <li class="flip">P<div class="panel"><p>P</p></div></li>
  <li class="flip">Q<div class="panel"><p>Q</p></div></li>
  <li class="flip">R<div class="panel"><p>R</p></div></li> 
  <li class="flip">S<div class="panel"><p>S</p></div></li> 
  <li class="flip">T<div class="panel"><p>T</p></div></li>
  <li class="flip">U<div class="panel"><p>U</p></div></li>
  <li class="flip">V<div class="panel"><p>V</p></div></li> 
  <li class="flip">W<div class="panel"><p>W</p></div></li>
  <li class="flip">X<div class="panel"><p>X</p></div></li>
  <li class="flip">Y<div class="panel"><p>Y</p></div></li> 
  <li class="flip">Z<div class="panel"><p>Z</p></div></li>  
</ul>