在 HTML/JS 和 CSS 中顯示按鈕以打開彈出窗口 window？

Question

當您單擊“水”按鈕下方的“土地”按鈕時，我想並排顯示 2 個按鈕。 這兩個按鈕都應該能夠打開我已經包含的代碼的彈出 windows。 我試圖實現按鈕代碼，但是當我點擊“土地”按鈕時，一切都消失了。 我怎樣才能解決這個問題？

這是小提琴：

http://jsfiddle.net/fku50o9v/2/

這是我當前的代碼：

 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: 10px; display: none; position: absolute; z-index: 1; color: red; }.dropdown-content button{ color: red; margin: 5px; display: block; }.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">land</button>.--> <span><button class="msgBtn2" onclick="popup('land'):" >land</button></span> <div id="land" class="dropdown-content"> <button target="popup" onclick="window.open('http,//google,com/popup','popup';'width=600;height=600'); return false;" class="msgBtn2">Workflow</button> </div> <button type="submit" class="msgBtn2">river</button> <button type="submit" class="msgBtn2">ocean</button> </div> </div></div> </div>

Answer 1

我相信這應該有效。 就像 Svela 提到的那樣，您“隱藏”了所有元素，但您單擊的元素除外。 您需要保持父級可見。 這只是一個骯臟的實現，我很確定還有更優雅的方法，但它應該給你一個好主意：D ...我認為..

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