我现在一直在研究应该是一个简单的功能。我有一个项目清单。单击每个时,我希望它在不使用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>
....
答案 0 :(得分:0)
onclick="show_div()"
;
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";
}
};
&#13;
#show { display: auto; }
&#13;
<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>
&#13;
但是我会使用getComputedStyle函数执行此操作。因为如果使用div.style.display,它会找到任何内联显示样式而不是css样式
这是另一个使用getComputedStyle函数的approcach
var div = document.getElementById('show');
var beer = document.getElementById('beer');
function show_div() {
console.log(div.style.display);
if(getComputedStyle(div,null).display== "none"){
div.style.display = "block";
} else { div.style.display = "none";
}
};
&#13;
#show { display: none; }
&#13;
<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>
&#13;
答案 1 :(得分:0)
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)
进行检查。
这是一个小提琴:https://jsfiddle.net/zs6aL7x2/