Javascript 可单击div以隐藏和显示内容

Javascript 可单击div以隐藏和显示内容,javascript,html,css,Javascript,Html,Css,不知道为什么这不起作用,有时需要双击div来显示内容,有什么建议为什么,以及如何修复吗。我希望它是隐藏和显示#newpost div,当点击toggle1 div等时,谢谢 var-button=document.getElementById('toggle1');//假定元素id为='button' button.onclick=函数(){ var div=document.getElementById('newpost'); 如果(div.style.display!=“无”){ div.

不知道为什么这不起作用,有时需要双击div来显示内容,有什么建议为什么,以及如何修复吗。我希望它是隐藏和显示#newpost div,当点击toggle1 div等时,谢谢

var-button=document.getElementById('toggle1');//假定元素id为='button'
button.onclick=函数(){
var div=document.getElementById('newpost');
如果(div.style.display!=“无”){
div.style.display='none';
}否则{
div.style.display='block';
}
};
var button=document.getElementById('toggle2');//假定元素id为='button'
button.onclick=函数(){
var div=document.getElementById('newpost1');
如果(div.style.display!=“无”){
div.style.display='none';
}否则{
div.style.display='block';
}
};

    主页 Lorem iporem ipsum Door sit amet,奉献给精英们。Omnis id、dolorem dolores obcaecati、repellat quamorem ipsum dolor sit amet、Concertetur Adipising Elite。Omnis id、dolorem dolores obcaecati、repellat quamsum dolor sit amet、Concertetur 再见。Omnis id,dolorem dolores obcaecati,repellat quam

    联系人
洛雷姆·伊普苏姆在码头上不可阻挡


Lorem ipsum dolor sit amet,奉献精英。Omnis id,dolorem dolores obcaecati,repellat quam


嗯,也许一开始你的按钮没有聚焦。尝试添加第一行:

document.querySelector('nav').focus();
var button=document.getElementById('toggle1');//假定元素id为='button'
button.onclick=函数(){
var div=document.getElementById('newpost');
如果(div.style.display!=“无”){
div.style.display='none';
}否则{
div.style.display='block';
}
};
var button=document.getElementById('toggle2');//假定元素id为='button'
button.onclick=函数(){
var div=document.getElementById('newpost1');
如果(div.style.display!=“无”){
div.style.display='none';
}否则{
div.style.display='block';
}
};

    主页 Lorem iporem ipsum Door sit amet,奉献给精英们。Omnis id、dolorem dolores obcaecati、repellat quamorem ipsum dolor sit amet、Concertetur Adipising Elite。Omnis id、dolorem dolores obcaecati、repellat quamsum dolor sit amet、Concertetur 再见。Omnis id,dolorem dolores obcaecati,repellat quam

    联系人
洛雷姆·伊普苏姆在码头上不可阻挡


Lorem ipsum dolor sit amet,奉献精英。Omnis id,dolorem dolores obcaecati,repellat quam


对我来说效果很好>。脚本不是很正确(有更简单、更简洁的方法)。此外,您还有两个id相同的div
newpost
。我不知道你为什么这么做,但这并不正确。我将你的代码复制粘贴到
jsfiddle
中,效果很好,总是显示/隐藏div。你是如何测试它的?也许事实上,您有两个“newpost”作为id(不允许)可能会导致一些问题。避免重复的id,改用类。它工作正常,您不应该在一个页面上使用相同的id两次。当我点击主页时,它并不总是切换内容,有时我需要双击它。我删除了相同的id div。我现在注意到,第一次我需要双击Home/Contact div来切换内容,然后它总是在单击一次之后工作。