从可点击列表元素

时间:2016-08-10 01:02:02

标签: javascript html css

我现在一直在研究应该是一个简单的功能。我有一个项目清单。单击每个时,我希望它在不使用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>
    ....

2 个答案:

答案 0 :(得分:0)

  • 的onclick =&#34; show_div&#34;应为onclick="show_div()"
    • div {display:none; } shold是div #show {display:auto; }
    • 请记住在每个声明的末尾使用;

&#13;
&#13;
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;
&#13;
&#13;

但是我会使用getComputedStyle函数执行此操作。因为如果使用div.style.display,它会找到任何内联显示样式而不是css样式

这是另一个使用getComputedStyle函数的approcach

&#13;
&#13;
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;
&#13;
&#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/