切换 - 隐藏并显示

我抄了w3schools隐藏和显示切换，但我希望它被颠倒，以便额外的信息不是从那里开始，但按钮显示它。切换 - 隐藏并显示

这是代码：

HTML：

<button onclick="myFunction()">Click Me</button> 

<div id="myDIV"> 
    This is my DIV element. 
</div>

JS：

function myFunction() { 
var x = document.getElementById('myDIV'); 
if (x.style.display === 'none') { 
    x.style.display = 'block'; 
} else { 
    x.style.display = 'none'; 
    } 
}

任何帮助，将不胜感激！

来源

2017-06-20 easyquestions

您是否想让'＃myDIV'元素初始显示'display：none'（*使其隐藏*）？另外我在这里没有看到任何jQuery，你不需要添加标签。 –

我没有在你的代码中看到任何jQuery，并且你发布了[似乎工作正常]（https://jsfiddle.net/j08691/xnvaz0aw/）。您在浏览器控制台中是否收到错误？ – j08691

是的，这听起来正确@SpencerWieczorek – easyquestions

解决方案很简单：只需隐藏div。

<div id="myDIV" style="display:none"> 
    This is my DIV element. 
</div>

更酷，如果你在CSS中隐藏它，而不是：

<div id="myDIV"> 
    This is my DIV element. 
</div>

这在你的CSS：

#myDIV { 
    display: none; 
}

来源

2017-06-20 20:36:50 Aenadon

谢谢！ :)这工作！只要10分钟完成，就会接受答案。 – easyquestions

@easyquestions很高兴我可以帮忙！请参阅编辑答案以获得更好的方式 – Aenadon

你只需要添加显示：在没有你码。

function myFunction() { 
 
var x = document.getElementById('myDIV'); 
 
if (x.style.display === 'none') { 
 
    x.style.display = 'block'; 
 
} else { 
 
    x.style.display = 'none'; 
 
    } 
 
}

<button onclick="myFunction()">Click Me</button> 
 

 
<div id="myDIV" style="display:none;"> 
 
    This is my DIV element. 
 
</div>

来源

2017-06-20 20:37:39

这里有一个片断例如

设置样式为隐藏元素：从一开始（显示无）。切换点击。

document.getElementById('myButton').onclick = function() { 
 
    var x = document.getElementById('myDIV'); 
 
    x.style.display = x.style.display === 'none' ? 'block' : 'none'; 
 
};

<button id='myButton' >Click Me</button> 
 

 
<div id="myDIV" style="display:none"> 
 
    This is my DIV element. 
 
</div>

来源

2017-06-20 20:38:41 mkaatman

我倒是我们一个工具CSS类这样的：

<button class="mybutton">Click Me</button> 
<div class="example is--hidden">Some Text</div>

和：

.is--hidden { 
    display: none; 
}

然后，您可以在默认情况下应用到元素通过jQuery切换：

$('.mybutton').on('click', function() { 
    $('.example').toggleClass('is--hidden'); 
})

小提琴：https://jsfiddle.net/tL5mj54n/

来源

2017-06-20 20:42:47

无需更改所需的样式或HTML。你的JavaScript的应该是以下几点：

(function() { 
var x = document.getElementById('myDIV'); 
if (x.style.display != 'none') { 
    x.style.display = 'none'; 
} else { 
    x.style.display = 'block'; 
    } 
})(); 

function myFunction() { 
var x = document.getElementById('myDIV'); 
if (x.style.display != 'none') { 
    x.style.display = 'none'; 
} else { 
    x.style.display = 'block'; 
    } 
};

第一个函数运行，并隐藏您的股利和第二起反应对点击并切换股利。

来源

2017-06-20 20:42:55

切换 - 隐藏并显示

回答

相关问题