下拉菜单是在Shadowdom
中创建的几乎完美,但是问题是在单击窗口中的任何其他位置
中的其他位置时如何隐藏下拉菜单class NavComponent extends HTMLElement {
constructor() {
super();
let template = document.currentScript.ownerDocument.querySelector('template');
let clone = document.importNode(template.content, true);
let root = this.attachShadow({ mode: 'open' });
root.appendChild(clone);
}
connectedCallback() {
let ddc = this.shadowRoot.querySelectorAll('.dropdowncontainer')
let dd = this.shadowRoot.querySelectorAll('.dropdown');
let ddc_length = ddc.length
for (let index = 0; index < ddc_length; index++) {
ddc[index].addEventListener('click', e => {
dd[index].classList.toggle('show');
});
}
/** have to update the code ............ */
window.onclick = function (event) {
} /** END - have to update the code ............ */
}
}
customElements.define('app-nav', NavComponent)
请参阅此演示以获取完整代码
最好的解决方案,因为@guitarino建议的是定义下拉菜单自定义元素。
单击菜单时,请调用将显示/隐藏菜单的(第一个(事件处理程序,并在window
上添加/添加/删除(第二( dropdown
事件处理程序。
依次,(第二(dropdown
事件处理程序只有在操作在自定义元素本身之外时才会调用第一个事件处理程序。
connectedCallback()
{
//mousedown anywhere
this.mouse_down = ev => !this.contains( ev.target ) && toggle_menu()
//toggle menu and window listener
var toggle_menu = () =>
{
if ( this.classList.toggle( 'show' ) )
window.addEventListener( 'mousedown', this.mouse_down )
else
window.removeEventListener( 'mousedown', this.mouse_down )
}
//click on menu
this.addEventListener( 'click', toggle_menu )
}
它可以使用或不带有阴影DOM:
customElements.define( 'drop-menu', class extends HTMLElement
{
constructor ()
{
super()
this.attachShadow( { mode: 'open'} )
.innerHTML = '<slot></slot>'
}
connectedCallback()
{
//mousedown anywhere
this.mouse_down = ev => !this.contains( ev.target ) && toggle_menu()
//toggle menu and window listener
var toggle_menu = () =>
{
if ( this.classList.toggle( 'show' ) )
window.addEventListener( 'mousedown', this.mouse_down )
else
window.removeEventListener( 'mousedown', this.mouse_down )
}
//click on menu
this.addEventListener( 'click', toggle_menu )
}
disconnectedCallback ()
{
this.removeEventListener( 'mousedown', this.mouse_down )
}
} )
drop-menu {
position: relative ;
cursor: pointer ;
display: inline-block ;
}
drop-menu > output {
border: 1px solid #ccc ;
padding: 2px 5px ;
}
drop-menu > ul {
box-sizing: content-box ;
position: absolute ;
top: 2px ; left: 5px ;
width: 200px;
list-style: none ;
border: 1px solid #ccc ;
padding: 0 ;
opacity: 0 ;
transition: all 0.2s ease-in-out ;
background: white ;
visibility: hidden ;
z-index: 2 ;
}
drop-menu.show > ul {
opacity: 1 ;
visibility: visible ;
}
drop-menu > ul > li {
overflow: hidden ;
transition: font 0.2s ease-in-out ;
padding: 2px 5px ;
background-color: #e7e7e7;
}
drop-menu:hover {
cursor: pointer;
background-color: #f2f2f2;
}
drop-menu ul li:hover {
background-color: #e0e0e0;
}
drop-menu ul li span {
float: right;
color: #f9f9f9;
background-color: #f03861;
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: .8rem;
}
drop-menu ul li:hover span {
background-color: #ee204e;
}
<drop-menu><output>Services</output>
<ul>
<li>Graphic desing</li>
<li>web design</li>
<li>app design</li>
<li>theme</li>
</ul>
</drop-menu>
<drop-menu><output>tutorial</output>
<ul>
<li>css <span>12 available</span></li>
<li>php <span>10 available</span></li>
<li>javascript <span>40 available</span></li>
<li>html <span>20 available</span></li>
</ul>
</drop-menu>
一个无关的建议:您可能应该将 .dropdown
分开为其自己的 <app-nav-dropdown>
组件,并在其'constructor'或'ConnectedCallback'中分配'click'''事件侦听器。
最好的问题是
ddc[index].addEventListener('click', e => {
if(dd[index].classList.contains('show')) {
dd[index].classList.remove('show');
window.removeEventListener('click', handleDropdownUnfocus, true);
}
else {
dd[index].classList.add('show');
window.addEventListener('click', handleDropdownUnfocus, true);
}
});
note :我将AddeventListener与true
一起使用,使事件发生在捕获处,以便在.dropdown clockdown click click click andler之后不会立即发生。
,您的handleDropdownUnfocus
看起来像
function handleDropdownUnfocus(e) {
Array.from(document.querySelectorAll('app-nav')).forEach(function(appNav) {
Array.from(appNav.shadowRoot.querySelectorAll('.dropdown')).forEach(function(dd) {
dd.classList.remove('show');
});
});
window.removeEventListener('click', handleDropdownUnfocus, true);
}
此解决方案存在问题,如果您在打开它后再次单击菜单项,它将调用.dropdown
和window
处理程序,并且净结果将是下拉列表将保持打开状态。为了解决这个问题,您通常通常在handleDropdownUnfocus
中添加检查:
if(e.target.closest('.dropdown')) return;
但是,它将无法工作。即使您单击.dropdown
,由于阴影DOM,您的e.target
也将是app-nav
元素。这使得进行切换变得更加困难。我不知道您将如何解决这个问题,也许您可以提出一些幻想,或者停止使用Shadow dom。
另外,您的代码具有一些 read标志 ...例如,您在for-loop中使用let
关键字,这很好。对let
的支持仍然非常有限,因此您更有可能将其转移。Transpiler只会将每个let
更改为var
。但是,如果您在循环中使用var
,则在这样的循环中分配处理程序将不再起作用,因为每个处理程序的index
都会参考最后一个下拉列表(因为索引现在将是全局的函数的上下文,而不是每个循环实例的本地(。