JavaScript中的if/else语句未按预期工作

Question

我试图通过链接来切换隐藏菜单。但是当我点击链接时，它重新打开了隐藏菜单而不是关闭它。

以下是我的期望操作：

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

• 当我在拥有焦点的hiddenBox之外点击时，将hiddenBox的display ='none'
  (这部分功能正常。)

JsFiddle

<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>

- Salih Erikci

---

当你点击离开它时，"onblur" 会比 "onclick" 先触发，导致隐藏。然后 "onclick" 处理程序会立即再次显示它。你需要重新设计这部分逻辑，使其按照预期工作。 - James Thorpe

Answer 1

这样做更好。

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>

- Weafs.py

---

请注意，原帖的焦点是设置在“hiddenBox”元素上，因此这种行为并不完全相同。但如果这正是原帖想要的，那就没问题！ - James Thorpe

@JamesThorpe - 没有必要将焦点设置在“hiddenBox”上。 - Weafs.py

你的代码中，当在隐藏框外单击时，hiddenBox 没有被关闭。 - Salih Erikci

@SalihErikci - 现在可以了。 - Weafs.py

在这个版本中，点击隐藏的框也会隐藏该隐藏的框。 - Stuart

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>

- Stuart