Javascript 如果/否则无法按预期工作

Javascript if/else not working as expected

本文关键字：工作 如果 Javascript      更新时间：2023-09-26

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

以下是我期望它运行的方式：

  • 当我点击labelLink
    如果hiddenBox display = 'none'，则将其更改为display = 'block'
    如果 hiddenBox display = 'block' ，则按 blur() 删除其焦点并将其设置为 display='none'

  • 当我在具有焦点的hiddenBox外部单击时，设置隐藏框的display='none'
    (这部分运行良好。

小提琴 

<ul>
    <li> 
        <a id="labelLink"  href="#" 
            onclick="
                if(document.getElementById('hiddenBox').style.display === 'block'){
                    document.getElementById('labelLink').focus();
                    document.getElementById('hiddenBox').style.display ='none';
                }
                else{
                    document.getElementById('hiddenBox').style.display = 'block';
                    document.getElementById('hiddenBox').focus();
                }
                return false;"
        >
        Click Me
        </a>
        <div id="hiddenBox" tabindex="-1"  
            onblur="document.getElementById('hiddenBox').style.display ='none';"
        >
        I was hidden
        </div>
    </li>
</ul>

改为这样做。

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';
})
#hiddenBox {
  display: none
}
<ul>
  <li><a id="labelLink" href="#">Click Me</a>
    <div id="hiddenBox" tabindex="-1">I was hidden</div>
  </li>
</ul>

如前所述，两个事件侦听器相互干扰。解决此问题的一种方法是在显示隐藏框时删除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>

相关文章：