JavaScript - 如果用户选择另一个菜单项或在菜单外单击，则关闭子菜单 [英] JavaScript - Close submenu if user selects another menu item or clicks outside of menu

问题描述

如果用户选择另一个菜单或在菜单外单击(单击页面上的其他内容)，我正在尝试弄清楚如何关闭子菜单下拉菜单.我已经阅读并尝试了几种不同的方法，但没有取得任何进展.我只是对什么是最好或正确的方法感到困惑.仅使用常规 JavaScript - 努力学习.

HTML

 
<div class="inner-wrap">
<li><a href="#" class="filterBtn">one</a><ul class="dropM"><li>我属于一个</li>
<li><a href="#" class="filterBtn">two</a><ul class="dropM"><li>我属于两个</li><li><a href="#" class="filterBtn">三</a><ul class="dropM"><li>我属于三个</li><li><a href="#" class="filterBtn">四</a><ul class="dropM"><li>我属于四个</li>

CSS

 html {box-sizing: 边框框；背景:#ffc600;字体系列:'helvetica neue';字体大小:20px；字体粗细:粗体；}身体 {边距:0 自动；填充:50px 0;}*，*:之前，*:之后{box-sizing:继承；}div.container {padding: 10px;背景:#bada55；文本对齐:居中；}div.inner-wrap {margin: 0 auto;位置:相对；显示:内联块；}ul#filters { 列表样式:无；}ul#filters li {display: inline-block;位置:相对；}ul#filters li >ul.dropM {列表样式:无；位置:绝对；顶部:30px；左:-40px；填充:15px；边框:1px 实心 #ccc；背景:#fff;显示:块；最小宽度:200px；显示:无；z-索引:201；}ul#filters li >ul.dropM.open {显示:块；}ul#filters {display: inline-block;}ul#filters li a.filterBtn {text-decoration: none;填充:10px 20px；背景:#ccc;颜色:黑色;}

JS

 const filterMenuBtn = document.querySelectorAll('a.filterBtn');const dropMenu = document.querySelectorAll('ul.dropM');函数 openDropMenu(e){filterMenuBtn.forEach(cliks => {//console.log(点击);如果(点击 === 这个){this.nextElementSibling.classList.toggle('open');//console.log('我点击了这个');}});}filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));

JSFiddle

解决方案

将您的 javascript 更新到此

const filterMenuBtn = document.querySelectorAll('a.filterBtn');const dropMenu = document.querySelectorAll('ul.dropM');函数 openDropMenu(e) {if (e.type == 'click'){e.currentTarget.nextElementSibling.classList.toggle('open');} 别的 {e.currentTarget.nextElementSibling.classList.remove('open');}}filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));

I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.

HTML

  <div class="container">
<div class="inner-wrap">
    <ul id="filters">
        <li><a href="#" class="filterBtn">one</a>
            <ul class="dropM">
                <li>I belong to one</li>
            </ul>
        </li>
        <li><a href="#" class="filterBtn">two</a>
            <ul class="dropM">
                <li>I belong to two</li>
            </ul>           
        </li>
        <li><a href="#" class="filterBtn">three</a>
            <ul class="dropM">
                <li>I belong to three</li>
            </ul>
        </li>
        <li><a href="#" class="filterBtn">four</a>
            <ul class="dropM">
                <li>I belong to four</li>
            </ul>           
        </li>
    </ul>
</div>

CSS

    html {
  box-sizing: border-box;
  background:#ffc600;
  font-family:'helvetica neue';
  font-size: 20px;
  font-weight: bold;
}
body {
  margin: 0 auto;
  padding: 50px 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;} 

ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}

JS

    const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');

function openDropMenu(e){
    filterMenuBtn.forEach(cliks => {
      //console.log(cliks);
      if(cliks === this) {
        this.nextElementSibling.classList.toggle('open');
        //console.log('i clicked this one');
      }
    });
}

filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));

JSFiddle

解决方案

Update your javascript to this

const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');

function openDropMenu(e) {
if (e.type == 'click'){
    e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
    e.currentTarget.nextElementSibling.classList.remove('open');
}
}

filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));

这篇关于JavaScript - 如果用户选择另一个菜单项或在菜单外单击，则关闭子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！