Как сделать так, чтобы div исчезал, когда я нажимаю на его сторону? ⇐ CSS

[Гость]

Как реализовать функцию в среде Академии Хана, при которой раскрывающийся список исчезает, если пользователь щелкает за его пределами, но остается видимым, если щелкнуть внутри, с использованием JavaScript/CSS/HTML? Несмотря на попытки, текущая реализация закрывает раскрывающийся список даже при нажатии внутри. В предоставленном коде используется прослушиватель событий, прикрепленный к событию щелчка документа, чтобы скрыть раскрывающийся список, если выбранный элемент не является самим раскрывающимся списком или изображением учетной записи. Что может быть причиной этой проблемы и как ее можно решить для достижения желаемой функциональности в рамках ограничений среды Академии Хана? Вот код, который я попробовал:

Код: Выделить всё

// Function to open the account dropdown
function openAccdrpdwn() {
document.getElementById("acc-drpdwn").style.display = "block";
} // Event listener to open the account dropdown when clicking on the account image
document.getElementById('account-signin').addEventListener('click', openAccdrpdwn);
// Function to open the account dropdown

// Event listener to close the account dropdown when clicking outside of it
document.onclick = function(event) {
var dropdown = document.getElementById("acc-drpdwn");
var accountImage = document.getElementById("account-signin");

if (event.target !== dropdown && event.target !== accountImage) {
dropdown.style.display = "none";
}
};

Код: Выделить всё

#account {
background-color: rgb(247, 247, 247);
width: 175px;
height: 300px;
border-radius: 17px;
position: absolute;
top: 68px;
left: 408px;
box-shadow: 0px 0px 7px 3px lightgray;
z-index: 1;
}

#inside-account {
background-color: rgb(209, 255, 215);
width: 175px;
height: 80px;
border-top-right-radius: 17px;
border-top-left-radius: 17px;
position: absolute;
top: 68px;
left: 408px;
z-index: 2;
}

#acc-drpdwn {
display: none;
}

.account-image {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
left: 0px;
top: 1.8px;
cursor: pointer;
}

#account-image {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
left: -2px;
top: -2.2px;
float: left;
}

```

Код: Выделить всё

[img]https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png[/img]

Однако этот код, похоже, не работает должным образом. Поле по-прежнему исчезает, даже если щелкнуть внутри него. Можете ли вы дать рекомендации о том, как правильно реализовать эту функциональность в условиях ограничений среды Академии Хана?

Подробнее здесь: https://stackoverflow.com/questions/784 ... side-of-it