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 只返回（或设置）元素的内联样式。在您第一次单击时，没有要读取的内联显示属性，因此您的条件将其设置为 none。在第二次单击时，您的条件会找到 none 并将其设置为 block。

寻找!block 的答案解决了这个直接的问题，但它仍然将您的样式与您的js 联系起来，而不是将其保留在您的CSS 中。这意味着如果您的 div 的默认显示属性需要在您的布局中更改（inline-block、flex 等），您需要在您的 js 和 CSS 中更改它。

出于这个原因，我建议完全不要使用内联样式，而是使用 Element.classList 来管理 CSS 中应用的样式——在这种情况下，只需添加/删除将 display 设置为 none 的 .hidden 类必须知道适当的可见显示默认值是什么。

此外，由于您无论如何都在查询代码中的按钮元素，因此最好从您的 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>