javascript - 从可点击列表元素切换 DIV

Question

我已经为应该是一个简单的函数而努力了太久了。我有一个元素 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>
    ....

Answer 1

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/