JavaScript 点击时显示不可见的 div

Question

我运行遇到一个问题，当我单击按钮时，它只是翻转图标，但仅在第二次单击时使不可见的字段可见。有什么想法吗？（这是一个 gif 来显示我的问题：https://ibb.co/cvz7pWC）这也是我的代码：

function moreSoc() {
    
    var moresoc = document.getElementById("moresoc");
    var btnText = document.getElementById("mbtn");

    if (moresoc.style.display === "none" ) {
        moresoc.style.display = "block";
        mbtn.innerHTML = "More ▲";
    } else {
        moresoc.style.display = "none";
        mbtn.innerHTML = "More ▼"
    }

}

.morebutton {
    border: none;
    background: #fff;
    color: #111;
    font-size: 32px;
}

#moresoc {
    display: none;
}

<div class="wrapper more">
            <button class="morebutton" id="mbtn" onclick="moreSoc()">More ▲</button>
        </div>
        <section class="social-links" id="moresoc">
            <div class="wrapper">
                <h2>Others</h2>
                    <div class="social-link facebook">
                        <p>Facebook</p>
                    </div>
                    <div class="social-link instagram">
                        <p>Instagram</p>
                    </div>
                    <div class="social-link twitter">
                        <p>Twitter</p>
                    </div>
                    <div class="social-link youtube">
                        <p>Youtube</p>
                    </div>
            </div>
        </section>

Answer 1

这可能是因为您第一次没有将 element.style.display 读成 none。这是因为它尚未被 JavaScript 设置，而只是被 css 设置。我建议更改您的 if 语句以检查 not "block".

function moreSoc() {
    
    var moresoc = document.getElementById("moresoc");
    var btnText = document.getElementById("mbtn");

    if (moresoc.style.display != "block" ) {
        moresoc.style.display = "block";
        mbtn.innerHTML = "More ▲";
    } else {
        moresoc.style.display = "none";
        mbtn.innerHTML = "More ▼"
    }

}

.morebutton {
    border: none;
    background: #fff;
    color: #111;
    font-size: 32px;
}

#moresoc {
    display: none;
}

<div class="wrapper more">
            <button class="morebutton" id="mbtn" onclick="moreSoc()">More ▼</button>
        </div>
        <section class="social-links" id="moresoc">
            <div class="wrapper">
                <h2>Others</h2>
                    <div class="social-link facebook">
                        <p>Facebook</p>
                    </div>
                    <div class="social-link instagram">
                        <p>Instagram</p>
                    </div>
                    <div class="social-link twitter">
                        <p>Twitter</p>
                    </div>
                    <div class="social-link youtube">
                        <p>Youtube</p>
                    </div>
            </div>
        </section>

Answer 2

ElementCSSInlineStyle.style 仅 returns（或设置）元素上的内联样式。在您第一次点击时，没有内联显示属性可供阅读，因此您的条件将其设置为 none。第二次单击时，您的条件找到 none 并将其设置为 block.

寻找 !block 的答案解决了这个紧迫的问题，但它仍然将您的样式与您的 js 联系在一起，而不是将其保留在您的 CSS 中。这意味着如果 div 的默认显示属性需要更改布局（内联块、flex 等），则需要在 js 和 [=37] 中更改它=].

出于这个原因，我建议根本不要使用内联样式，而是使用 Element.classList 来管理来自 CSS 的应用样式——在这种情况下，只是 adding/removing .hidden class 将显示设置为 none 而无需知道适当的可见显示默认值是什么。

此外，由于您无论如何都要在代码中查询按钮元素，因此最好也从您的 js 中应用点击侦听器而不是内联。

function moreSoc() {
  const moresoc = document.getElementById("moresoc");
  
  if (moresoc.classList.contains('hidden')) {
    moresoc.classList.remove('hidden');
    mbtn.innerHTML = "More ▲";
  } else {
    moresoc.classList.add('hidden');
    mbtn.innerHTML = "More ▼"
  }
}

const mbtn = document.getElementById("mbtn");
mbtn.addEventListener('click', moreSoc);

.morebutton {
    border: none;
    background: #fff;
    color: #111;
    font-size: 32px;
}

#moresoc {
    
}

.hidden {
  display: none;
}

<div class="wrapper more">
  <button class="morebutton" id="mbtn">More ▲</button>
</div>
<section class="social-links hidden" id="moresoc">
  <div class="wrapper">
    <h2>Others</h2>
    <div class="social-link facebook">
      <p>Facebook</p>
    </div>
    <div class="social-link instagram">
      <p>Instagram</p>
    </div>
    <div class="social-link twitter">
      <p>Twitter</p>
    </div>
    <div class="social-link youtube">
      <p>Youtube</p>
    </div>
  </div>
</section>

JavaScript 点击时显示不可见的 div

JavaScript Show invisible divs on click

html

javascript

css

icons

button