我已经为应该是一个简单的函数而努力了太久了。我有一个元素 list 。单击每个时,我希望它在不使用 jQuery 的情况下切换带有该元素信息的隐藏 div。我已经从这个站点和其他站点几乎逐行复制了几个示例,并尝试了很多变体,但似乎没有任何效果。我希望这是一个简单的解决方案,但我现在快把自己逼疯了。气馁,有什么想法吗?
JS:
var div = document.getElementById('show')
var beer = document.getElementById('beer')
function show_div() {
if (div.style.display == "none") {
div.style.display = ""
} else {
div.style.display = "none"
}
};
CSS
div { display: none; }
HTML
<li>Beers I Currently Have
<ul>
<li><a href="#" id="beer" onclick="show_div">2 Sierra Nevada Bigfoot (12/11/14)</a></li>
<div id="show">Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>
....
最佳答案
HTML:
<ul>
<li>
<a href="#" id="beer">2 Sierra Nevada Bigfoot (12/11/13)</a>
<div hidden>Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>
</li>
</ul>
CSS:
/* No need to set display:none here
since we are using 'hidden' directly
in the element. */
#beer div { }
JavaScript:
var beer = document.getElementById('beer')
// Add an event listener to beer. Listen for
// the 'click' event.
beer.addEventListener('click', function(e) {
e.preventDefault(); // prevent default <a> behavior
info = e.target.nextElementSibling;
if (info.hidden) info.hidden = false;
else info.hidden = true;
return false; // prevent default <a> behavior
});
基本上,每个列表项都由一个链接和一个 div 组成。用户单击链接以切换 div。在 DOM 中将它们并排放置,这样您就可以更轻松地访问 div。例如,现在您可以使用 e.target.nextElementSibling 来访问 <a>
的下一个兄弟元素。元素。如果您对什么感到困惑e
是,放入 console.log(e)
在该点击处理程序中检查它。
这是一个 fiddle :https://jsfiddle.net/zs6aL7x2/
关于javascript - 从可点击列表元素切换 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38862680/