【问题标题】:Hiding and showing divs with Javascript without multiple functions使用没有多个功能的 Javascript 隐藏和显示 div
【发布时间】:2014-04-21 02:29:31
【问题描述】:

如何隐藏 LI 的子 div 而无需为每个集合重新键入函数?我打算多次重复当前的 html。当前的 Javascript:

function $(id){
    return document.getElementById(id);
}
function year2014(){
    if ($('2014entries').style.display == 'none'){
        $('2014entries').style.display = 'block';
    }
    else {
        $('2014entries').style.display = 'none';
    }
}
function year2013(){
    if ($('2013entries').style.display == 'none'){
        $('2013entries').style.display = 'block';
    }
    else {
        $('2013entries').style.display = 'none';
    }
}

部分 HTML:

<ul>
<li id="2014" onclick="year2014()">2014</li>
    <div id="2014entries">
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </div>
<li id="2013" onclick="year2013()">2013</li>
    <div id="2013entries">
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </div>
</ul>

【问题讨论】:

  • 你能改变标记吗?

标签: javascript html show-hide


【解决方案1】:

为什么你不尝试这样的事情:

function year(yearValue){
    if ($(yearValue+'entries').style.display == 'none'){
        $(yearValue+'entries').style.display = 'block';
    }
    else {
        $(yearValue + 'entries').style.display = 'none';
    }
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多