单击另一个div时如何隐藏div

Question

当我单击另一个 div 时，它会下降到前一个 div，但我希望它应该位于前一个 div 的同一位置，而不单击前一个 div（关闭）

<div class="col-sm-6 col-lg-3 " onclick="drop_down('drop1')"> (CARD) </div>

<div class="col-sm-6 col-lg-3 " onclick="drop_down('drop2')"> (CARD) </div>

<div class="drop   col-12" id="drop1" style="display:none" >..</div>

<div class="drop   col-12" id="drop2" style="display:none" >..</div>

function drop_down(e){
    var x = document.getElementById(e);
    if(x.style.display === "none"){
        x.style.display = "block";
    }
    else{
        x.style.display = "none";
    }
}

Answer 1

如果我理解您的问题陈述，您希望在显示新下拉列表之前隐藏可见下拉列表。

为此，只需在执行逻辑之前隐藏所有下拉列表：

function drop_down(e){
    var x = document.getElementById(e);
    const xIsShowing = x.style.display === "block";
    document.getElementById('drop1').style.display = 'none';
    document.getElementById('drop2').style.display = 'none';
    if(!xIsShowing) {
        x.style.display = "block";
    }
}

Answer 2

像这样的东西？

 function drop_down(e){ var drop = document.getElementsByClassName('drop') for(var i = 0; i < drop.length; i++){ if(e == drop[i].id){ drop[i].style.display = "block"; } else{ drop[i].style.display = "none"; } } }

 <div class="col-sm-6 col-lg-3" onclick="drop_down('drop1')"> (CARD) </div> <div class="col-sm-6 col-lg-3" onclick="drop_down('drop2')"> (CARD) </div> <div class="drop col-12" id="drop1" style="display:none" >Div one</div> <div class="drop col-12" id="drop2" style="display:none" >Div two</div>