Когда я нажимаю другой 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";
}
}
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";
}
}
Что-то вроде этого?
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>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.