Question

为什么我的HTML需要我的按钮，以显示我的单选按钮，在我第一次加载页面时双击，但只需单击一下即可切换显示和隐藏的表单。似乎无法弄明白。这是我的js函数

function madison() {
var x = document.getElementById("madison_inv");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

这是我的HTML。只是想让“麦迪逊”按钮暂时工作。它加载形式完美，并运行我的PHP等。我首次加载页面时只需要双击，但我希望它只需单击一下。

    <div class="navbar">
    <div class="dropdown">
    <button class="dropbtn">Campus Locations
    <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <button onclick="main_hosp()"  class="button" id="huntsville">Huntsville Hospital</button>
    <button onclick="wc_hosp()" class="button" id="wc">Womens and Childrens Hospital</button>
    <button onclick="madison()" class="button" id="madison">Madison Hospital</button>
</div>      
</div>
</div><br>

    <form id="madison_inv"><strong> View Report for:</strong>
    <input type="radio" name="location" value="Total Inv Count" onclick="mad_totinv()">Total Inventory Count</input>
    <input type="radio" name="location" value="Total Narc Count" onclick="mad_totNarc()">Total Narc Count</input>
    <input type="radio" name="location" value="Pyxis Inv Count" onclick="mad_pyxisinv()">Pyxis Inventory Count</input>
    <input type="radio" name="location" value="Pyxis Narc Count" onclick="mad_pyxisnarc()">Pyxis Narc Count</input>
    <input type="radio" name="location" value="Pyxis NonNarc Count" onclick="mad_pyxisnonnarc()">Pyxis NonNarc Count</input>
    <input type="radio" name="location" value="Vault Count" onclick="mad_vault()">Vault Count</input>
            </form> <br>

</article>

Answer 1

如果按钮开始显示，则您引用的代码可以正常工作，但您的问题表明它们没有;如果您使用CSS规则隐藏它们但未向我们显示（编辑：you've confirmed now that you are），则问题是display将为""最初（即使它们被CSS隐藏），所以这个逻辑：

var x = document.getElementById("madison_inv");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

...隐藏在第一次点击。第一次点击后，它将切换。

要获得display允许CSS的值，请不要使用.style，而是使用getComputedStyle（对于过时的IE，请回退到currentStyle）。在您的页面设置中：

if (!window.getComputedStyle) {
    // Fallback for obsolete IE
    window.getComputedStyle = function(e) {
        return e.currentStyle;
    };
}

然后

var x = document.getElementById("madison_inv");
if (getComputedStyle(x).display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

示例：

if (!window.getComputedStyle) {
    // Fallback for obsolete IE
    window.getComputedStyle = function(e) {
        return e.currentStyle;
    };
}

function madison() {
    var x = document.getElementById("madison_inv");
    if (getComputedStyle(x).display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

#madison_inv {
  display: none;
}

<button onclick="madison()">Madison</button>
<div id="madison_inv">Radio buttons here</div>

然而，我建议改为转换类：

if (!window.getComputedStyle) {
    // Fallback for obsolete IE
    window.getComputedStyle = function(e) {
        return e.currentStyle;
    };
}

function madison() {
    var x = document.getElementById("madison_inv");
    x.classList.toggle("hidden");
}

#madison_inv {
  /* ...any other styles for it...*/
}
.hidden {
  display: none;
}

<button onclick="madison()">Madison</button>
<div id="madison_inv" class="hidden">Radio buttons here</div>

为什么HTML首次加载时需要双击

1 个答案: