时间戳

首页 > 解决方案 > 在 HTML/JS 和 CSS 中显示一个打开弹出窗口的按钮？

javascript - 在 HTML/JS 和 CSS 中显示一个打开弹出窗口的按钮？

问题描述

当您单击“水”按钮下方的“土地”按钮时，我想并排显示 2 个按钮。这两个按钮都应该能够打开我已经包含的代码的弹出窗口。我试图实现按钮代码，但是当我点击“土地”按钮时，一切都消失了。我怎样才能解决这个问题？

这是小提琴：

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>

标签： javascripthtmljquerycss

解决方案

我相信这应该有效。就像 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" );
  }
}

推荐阅读