javascript - 必须点击两次才能得到一个回应

Question

我制作了一个下拉菜单，它会在点击按钮时出现。非常简单，除了我必须单击两次才能执行 js 函数。在我第一次点击它之后，它会像它应该的那样出现和消失——只需点击一次。我不知道为什么它需要这个并且已经搜索了修复程序，但它们似乎都不起作用。

这是我的 HTML:

<ul class="resources-menu">
    <li>
        <button onclick="res()" id="resbut" onblur="setTimeout('reshide()', 175)">Resources</button>
        <ul id="resblock">
            <li style="padding-bottom: 20px; text-align:center;padding-top:25px">
                <button onclick="dirlnk()">Directory</button>
            </li>
        </ul>        
    </li>
</ul>

CSS:

.resources-menu {
    width:88px;
    float:left;
}
#resbut {
    font-weight:700;
    height:30px;
    text-decoration:underline;
    border-radius:3px;
    border-color: black;
}
ul.resources-menu, ul.resources-menu ul {
    list-style:none;
    margin:0;
    padding:0;
    position: relative;
}
#resblock {
    width: 90px;
    background-color: lightblue;
    display: none;
    position: absolute;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:10px;
    border:solid;
    border-color:black;
}

JavaScript

function res() {
    if (document.getElementById('resblock').style.display == 'none') {
        document.getElementById('resblock').style.display = 'block';
        document.getElementById('resbut').style.background = "lightblue";
        document.getElementById('resbut').style.borderBottomRightRadius = "0px";
        document.getElementById('resbut').style.borderBottomLeftRadius = "0px";
        document.getElementById('resbut').style.borderBottom = "none";
        document.getElementById('resbut').style.textDecoration = "none";
    } else {
        document.getElementById('resblock').style.display = 'none';
        document.getElementById('resbut').style.background = "";
        document.getElementById('resbut').style.borderBottomRightRadius = "";
        document.getElementById('resbut').style.borderBottomLeftRadius = "";
        document.getElementById('resbut').style.borderBottom = "";
        document.getElementById('resbut').style.textDecoration = "";
    }
}
function reshide() {
    document.getElementById('resblock').style.display = 'none';
    document.getElementById('resbut').style.background = "";
    document.getElementById('resbut').style.borderBottomRightRadius = "";
    document.getElementById('resbut').style.borderBottomLeftRadius = "";
    document.getElementById('resbut').style.borderBottom = "";
    document.getElementById('resbut').style.textDecoration = "";
}
function dirlnk() {
    window.location = "/Portal/directory";
}

Answer 1

当 style 属性位于 CSS 文件中时，您正在查看它，而不是 style 属性。使用 getComputedStyle 代替:

function res() {
    var resblock = document.getElementById('resblock');
    var resblockStyle = resblock.style;
    var resbutStyle = document.getElementById('resbut').style;
    if (getComputedStyle(resblock).display === 'none') {
        resblockStyle.display = 'block';
        resblockStyle.background = "lightblue";
        resbutStyle.borderBottomRightRadius = "0px";
        resbutStyle.borderBottomLeftRadius = "0px";
        resbutStyle.borderBottom = "none";
        resbutStyle.textDecoration = "none";
    } else {
        reshide();
    }
}
function reshide() {
    var resblockStyle = document.getElementById('resblock').style;
    var resbutStyle = document.getElementById('resbut').style;
    resblockStyle.display = 'none';
    resbutStyle.background = "";
    resbutStyle.borderBottomRightRadius = "";
    resbutStyle.borderBottomLeftRadius = "";
    resbutStyle.borderBottom = "";
    resbutStyle.textDecoration = "";
}
function dirlnk() {
    window.location.href = "/Portal/directory";
}

缓存变量也是一个好主意，这样您就不需要为每个样式添加查询 DOM。您的 reshide 函数与 res 函数中的其他函数执行相同的操作——您应该尽可能避免重复代码。

兼容性问题

正如@garromark 正确指出的那样，如果您需要支持旧版浏览器(即 IE8 及更低版本)，则此解决方案将不起作用。或者，您可以添加一个名为 .no-display 的类并检查该类是否存在:

.no-display {
    display: none !important;
}

然后你的 JavaScript 检查:

if (/\bno\-display\b/.test(resblock.className)) {