Question

我正在尝试使用链接切换隐藏的菜单。但当我点击链接时，它会重新打开隐藏的菜单而不是关闭它。

以下是我希望它如何运行：

点击labelLink时如果hiddenBox的{{1}}，则将其更改为display = 'none' 如果display = 'block' hiddenBox，则按display = 'block'删除其焦点并将其设置为blur()
当我在display='none'有焦点时点击外面，设置hiddenBox的hiddenBox
（这部分运作良好。）

display='none'

Answer 1

这样做。

＆＃13;

var labelLink = document.getElementById('labelLink');
var hiddenBox = document.getElementById('hiddenBox');

labelLink.addEventListener('click', function() {
  hiddenBox.style.display = hiddenBox.style.display == 'block' ? 'none': 'block';
});

labelLink.addEventListener('blur', function() {
  hiddenBox.style.display = 'none';
})

＆＃13;

#hiddenBox {
  display: none
}

＆＃13;

<ul>
  <li><a id="labelLink" href="#">Click Me</a>
    <div id="hiddenBox" tabindex="-1">I was hidden</div>
  </li>
</ul>

＆＃13;

Answer 2

正如已经指出的那样，两个事件监听器互相干扰。修复此问题的一种方法是在显示隐藏框时删除labelLink上的侦听器，并在隐藏框再次隐藏后稍微暂停恢复侦听器。 JSFiddle

var labelLink = document.getElementById('labelLink'),
    hiddenBox = document.getElementById('hiddenBox');    
labelLink.addEventListener('click', showBox);
hiddenBox.addEventListener('blur', hideBox);
function showBox(){
    hiddenBox.style.display = 'block';
    hiddenBox.focus();
    labelLink.removeEventListener('click', showBox);
}
function hideBox() {
    hiddenBox.style.display = 'none';
    labelLink.focus();
    window.setTimeout(function() {
        labelLink.addEventListener('click', showBox);
    }, 500);
}

<a id="labelLink"  href="#" >Click Me</a>
<div id="hiddenBox" tabindex="-1" style="display:none" >I was hidden</div>

Javascript if / else没有按预期工作

2 个答案: