Изменить расположение / направление выпадающего меню

#html #css

#HTML #css

Вопрос:

В настоящее время я работаю над добавлением выпадающего меню на свой веб-сайт, которое работает в основном, однако выпадающее меню выпадает справа от выбранного изображения и исчезает со страницы. Я пытался искать способы изменить это положение и попытался добавить поле right: 0px; и т.д. Кажется, ничто не влияет на выпадающий список.

 .profile, .avatar{
    width: 3em;
    height: 3em;
    position: relative;
    float: right;
    border-radius: 50%;
    
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

JS here:

    function displayDropdown(){
        document.getElementById("dropDown").classList.toggle("show")
    }
    
    window.onclick = function(event) {
        if (!event.target.matches('.avatar')) {
            var dropdowns = document.getElementsByClassName("dropdown- 
    content");
            var i;
            for ( i = 0; i < dropdowns.length; i  ) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

1. Пожалуйста, разместите весь соответствующий код js / css с вашим вопросом. Как определяются классы профилей и аватаров? Где displayDropdown функция?

2. Я сделал вам фрагмент — в нем отсутствует функция

3. Обновил сообщение с помощью js и CSS профиля / аватара. Спасибо за создание фрагмента, но по какой-либо причине это мешало мне опубликовать мою правку.

Ответ №1:

изменено расположение выпадающего списка на относительное, что позволило мне использовать right: и top: CSS для его позиционирования.

Ответ №2:

Если вы пытаетесь щелкнуть элемент и выпадающий список «показать», затем сделайте следующее if, else утверждение:

 var clickElement = document.querySelector(".element");
var dropdown = document.querySelector(".dropdown");
var elementClicked = false


clickElement.addEventListener("click", function(){

  if (elementClicked == false) {
 
  dropdown.style.display = "block";

  elementClicked = true

} else if (elementClicked == true) {
   
  dropdown.style.display = "none";

  elementClicked = false

})

Развернуть фрагмент