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

您正在查看CSS文件中的style属性，而不是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函数中的else执行相同的操作 - 您应该避免在可行的情况下重复代码。

兼容性问题

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

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

然后你的JavaScript检查：

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

必须单击两次才能获得一个响应

1 个答案:

兼容性问题