使用 HTML/JS 和 CSS 單擊另一個按鈕時打開一列按鈕？

Question

我有一排 5 個按鈕，這些按鈕已在下面的小提琴中實現。 我想以這樣的方式實現代碼，如果我單擊任何按鈕，例如水，特定按鈕的列表會垂直顯示。類似地，所有 5 個按鈕都應該出現一個按鈕列表，並且一次應該只有一個列表可見。

<div id="outer">
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;" >Water</button></div>
        
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Public</button></div>
        
        <div class="inner"><button class="msgBtn2">Transport</button></div>
        
          <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">House</button></div>
          
          
            <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Utilities</button></div>
            
    </div> 

這是小提琴： http://jsfiddle.net/fku50o9v/

我怎樣才能做到這一點？ 我嘗試使用 OnClick 來實現它，但無法這樣做。

Answer 1

 function popup(id){ if($("#"+id).hasClass( "vis" )){ $("#"+id).removeClass( "vis" ); }else{ $(".dropdown-content").removeClass( "vis" ); $("#"+id).addClass( "vis" ); } }

 #outer { width:100%; text-align: center; }.inner { display: inline-block; padding-right: 20px; }.msgBtn2{ cursor: pointer; font-size: 1.2rem; height: 2.5rem; border: none; border-radius: 10px; color: blue; background-color: #ffff; outline: none; box-shadow: 0 0.3rem rgba(121,121,121,0.70); }.dropdown { position: relative; display: inline-block; width: 100%; }.dropdown-content { min-width: 160px; top: 50px; margin-left: -40px; display: none; position: absolute; z-index: 1; color: red; }.dropdown-content button{ color: red; margin: 5px }.vis { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="outer"> <div class="inner"> <div class="dropdown"> <span><button class="msgBtn2" onclick="popup('water');" >Water</button></span> <div id="water" class="dropdown-content"> <button type="submit" class="msgBtn2">Button One</button> <button type="submit" class="msgBtn2">Button Two</button> <button type="submit" class="msgBtn2">Button Three</button> </div> </div></div> <div class="inner"> <div class="dropdown"> <span><button class="msgBtn2" onClick="popup('public');" >Public</button></span> <div id="public" class="dropdown-content"> <button type="submit" class="msgBtn2">Button One</button> <button type="submit" class="msgBtn2">Button Two</button> <button type="submit" class="msgBtn2">Button Three</button> <button type="submit" class="msgBtn2">Other Button</button> </div></div> </div> <div class="inner"> <div class="dropdown"> <span><button type="submit" class="msgBtn2" onClick="popup('transport');" >Transport</button></span> <div id="transport" class="dropdown-content"> <button type="submit" class="msgBtn2">Button One</button> <button type="submit" class="msgBtn2">Button Two</button> <button type="submit" class="msgBtn2">Button Three</button> <button type="submit" class="msgBtn2">Other Button</button> </div></div></div> <div class="inner"> <div class="dropdown"> <span><button type="submit" class="msgBtn2" onClick="popup('house');" >House</button></span> <div id="house" class="dropdown-content"> <button type="submit" class="msgBtn2">Button One</button> <button type="submit" class="msgBtn2">Button Two</button> <button type="submit" class="msgBtn2">Button Three</button> <button type="submit" class="msgBtn2">Other Button</button> </div></div></div> <div class="inner"> <div class="dropdown"> <span><button type="submit" class="msgBtn2" onClick="popup('utilities');" >Utilities</button></span> <div id="utilities" class="dropdown-content"> <button type="submit" class="msgBtn2">Button One</button> <button type="submit" class="msgBtn2">Button Two</button> <button type="submit" class="msgBtn2">Button Three</button> <button type="submit" class="msgBtn2">2 Other Button</button> </div></div></div> </div>

嘗試這個！