Javascript 切换div需要2次单击。应该是1点

在手机上隐藏div的问题上，我得到了一些很好的帮助，但我还有一个问题。我开始学习更多的JavaScript，绝对是个新手

这是一个在移动设备上隐藏的内容div的工作示例，除非单击按钮。它工作得很好，只是最初打开div需要2次单击。我希望它只需单击一次

我已经看到了关于这类问题的一些答案，并尝试过，但它们现在超出了我的理解能力。我不明白

我如何重新编写脚本，以便只需单击一个按钮即可打开div？谢谢

功能切换库（）{
var x=document.getElementById（'image-gallery'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}

#图像库{
显示：块；
宽度：600px；
边框：1px纯黑；
}
#李国宝图片画廊{
宽度：150px；
高度：150像素；
颜色：白色；
文本对齐：居中；
利润率：10px；
背景颜色：灰色；
显示：内联块；
}
钮扣{
显示：无；
}
@介质（最大宽度：600px）{
#图像库{
显示：无；
宽度：100%；
}
钮扣{
显示：块；
}
}

单击以查看图像
我想只需点击一个按钮就可以在手机上显示此内容


图1
图2
图3

设置

x.style.display='block'

在开始时

样式

属性没有看到css规则

在这里，您的css不好

var x=document.getElementById（'image-gallery'）；
函数toggleGallery（）{
x、 style.display=x.style.display=='none'？
“块”：“无”；
}

#图像库{
显示：块；
宽度：600px；
边框：1px纯黑；
}
#李国宝图片画廊{
宽度：150px；
高度：150像素；
颜色：白色；
文本对齐：居中；
利润率：10px；
背景颜色：灰色；
显示：内联块；
}
@介质（最大宽度：600px）{
#图像库{
显示：无；
宽度：100%；
}
钮扣{
显示：块；
}

单击以查看图像
我想只需点击一个按钮就可以在手机上显示此内容


图1
图2
图3

在

toggleGallery（）

函数中，将条件

x.style.display==='none'

替换为

x.style.display！=='block'

---

display

属性最初不等于

none

，这意味着您的函数将在该条件下将其设置为

none

，这意味着下次它将正常工作并将其设置为

block

。通过检查

display

是否不等于

block

，它将第一次工作

这是因为

x.style

只返回

#image gallery

的内联样式。由于它没有内联样式开头，

x.style.display

将始终计算为未定义

实际上，您需要的是获取元素的计算显示属性（即您在开发人员工具中“计算样式”下看到的属性）。要获取该属性，您只需使用，即：

window.getComputedStyle（x）。display

：

功能切换库（）{
var x=document.getElementById（'image-gallery'）；
var xDisplay=window.getComputedStyle（x）.display；
如果（xDisplay=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}

#图像库{
显示：块；
宽度：600px；
边框：1px纯黑；
}
#李国宝图片画廊{
宽度：150px；
高度：150像素；
颜色：白色；
文本对齐：居中；
利润率：10px；
背景颜色：灰色；
显示：内联块；
}
#图像库{
显示：无；
宽度：100%；
}
钮扣{
显示：块；
}

单击以查看图像
我想只需点击一个按钮就可以在手机上显示此内容


图1
图2
图3

jQuery是一个选项，还是您想继续使用普通javascript？放置

console.log（x.style.display）

在if语句之前，查看它在第一次单击时记录到控制台的内容。nurdyguy-jquery是一个选项，我可能会使用它，但我想至少先了解一下我用这个简单的东西做了什么。谢谢Terry向我解释，这很管用。Chris的选项也管用，我正在标记那个选项，但这非常有用。现在我知道了有两种方法可以做到这一点——再次感谢。