JavaScript在单击时显示不可见的div

我遇到了一个问题，当我点击按钮时，它只会翻转图标，但只会在第二次点击时使不可见的字段可见。你知道怎么做吗？ （这里有一个gif显示我的问题：） 这是我的密码：

函数moreSoc（）{
var moresoc=document.getElementById（“moresoc”）；
var btnText=document.getElementById（“mbtn”）；
如果（moresoc.style.display==“无”）{
moresoc.style.display=“块”；
mbtn.innerHTML=“更多▲";
}否则{
moresoc.style.display=“无”；
mbtn.innerHTML=“更多▼"
}
}

.morebutton{
边界：无；
背景：#fff；
颜色：#111；
字体大小：32px；
}
#莫雷索克{
显示：无；
}

更多▲
其他
脸谱网

Instagram

推特

Youtube

这可能是因为您第一次没有将

元素.style.display

显示为

none

。这是因为它尚未由JavaScript设置，而只是由css设置。我建议更改

if

语句以检查not

“block”

函数moreSoc（）{
var moresoc=document.getElementById（“moresoc”）；
var btnText=document.getElementById（“mbtn”）；
if（moresoc.style.display！=“块”）{
moresoc.style.display=“块”；
mbtn.innerHTML=“更多▲";
}否则{
moresoc.style.display=“无”；
mbtn.innerHTML=“更多▼"
}
}

.morebutton{
边界：无；
背景：#fff；
颜色：#111；
字体大小：32px；
}
#莫雷索克{
显示：无；
}

更多▼
其他
脸谱网

Instagram

推特

Youtube

仅返回（或设置）元素的内联样式。第一次单击时，没有要读取的内联显示属性，因此您的条件将其设置为

none

。第二次单击时，您的条件将查找

none

，并将其设置为

block

查找

！block

的答案解决了这个直接的问题，但它仍然将您的样式与js绑定在一起，而不是保留在CSS中。这意味着，如果您的div的默认显示属性需要在布局中更改（内联块、flex等），则您需要在js和CSS中更改它

因此，我建议不要使用内联样式，而是使用它来管理CSS中应用的样式–在本例中，只需添加/删除一个

.hidden

类，该类将显示设置为“无”，而无需知道相应的可见显示默认值是什么

另外，由于您正在查询代码中的按钮元素，因此最好也从js应用click侦听器，而不是内联

函数moreSoc（）{
const moresoc=document.getElementById（“moresoc”）；
if（moresoc.classList.contains（'hidden'））{
moresoc.classList.remove（'hidden'）；
mbtn.innerHTML=“更多▲";
}否则{
moresoc.classList.add（'hidden'）；
mbtn.innerHTML=“更多▼"
}
}
const mbtn=document.getElementById（“mbtn”）；
mbtn.addEventListener（'click'，moreSoc）；

.morebutton{
边界：无；
背景：#fff；
颜色：#111；
字体大小：32px；
}
#莫雷索克{
}
.隐藏{
显示：无；
}

更多▲
其他
脸谱网

Instagram

推特

Youtube

这是因为在第一次单击时，

moreSoc

没有

样式。显示
属性集，将其设置为“无”，然后在第二次单击时将其设置为“块”。（
style.property
仅检查直接在元素上设置的样式，不与css规则关联）