WedX - журнал о программировании и компьютерных науках

Щелкните снаружи, чтобы закрыть выпадающее меню аватара.

У меня есть выпадающее меню аватара, и вы должны щелкнуть аватар, чтобы закрыть меню, но я хочу иметь возможность щелкнуть в любом месте страницы, чтобы закрыть меню. любая помощь будет принята с благодарностью.

ниже html и javasript

<div class="user-menu-wrap">
            <a  class="mini-photo-wrapper" href="page.html" onclick="return false" style="cursor:pointer;"><img src="/images/default_avatar.png" /></a>

  <div class="menu-container">
    <ul class="user-menu" style="list-style:none;">
      <li class="user-menu__item"><a class="user-menu-link" href="/member.php">Profile</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="/private.php">Messages</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="/friends">Friends</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="/view-alerts">Alerts</a></li>

    </ul>
  </div>


    document.querySelector('.mini-photo-wrapper').addEventListener('click', function() {
  document.querySelector('.menu-container').classList.toggle('active');
});
javascript menu drop-down-menu css avatar
30.11.2019

  • Обычно вы прикрепляете прослушиватель событий к телу документа. 30.11.2019
  • Можете ли вы показать мне пример того, как это будет работать, пожалуйста? 30.11.2019
  • Уже поздно, и я ленив, но это выглядит как дубликат: stackoverflow.com/questions/33060993/ 30.11.2019
  • этот код другой, но все равно спасибо, может быть кто-нибудь может мне помочь? 30.11.2019

Ответы:


1 
window.onload = function(){
  var divToHide = document.getElementById('divToHide');
  document.onclick = function(e){
    if(e.target.id !== 'divToHide'){
      document.querySelector('.menu-container').classList.remove('active');
    }
  };
};

Я почти буквально скопировал это. Если на странице есть только один элемент, отдайте предпочтение идентификатору, а не классу, как в этом примере.

30.11.2019
  • Каждая ссылка на странице теперь открывает меню, что я упускаю или делаю неправильно? 30.11.2019
  • Спасибо за вашу помощь, но с новым редактированием раскрывающийся список больше не открывается, извините 30.11.2019
    • Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]