Когда я нажимаю другой 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";
    }
}
0
user14188960 5 Дек 2020 в 22:11

2 ответа

Лучший ответ

Если я понимаю вашу формулировку проблемы, вы хотите, чтобы видимый раскрывающийся список скрылся до отображения нового раскрывающегося списка.

Для этого просто скройте все раскрывающиеся списки перед выполнением своей логики:

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";
    }
}
1
terrymorse 5 Дек 2020 в 19:25

Что-то вроде этого?

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>
0
Stefan Avramovic 5 Дек 2020 в 19:24