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>

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>