在级联 DIV 上制作 onClick 事件

Question

我正在尝试做一些级联 html DIV，但还做不到。

======概念======

1 - 一开始应该怎样：

| ParentDiv |

2 - 用户点击 ParentDiv 后：

| ParentDiv |

======概念结束======

======代码到现在======

        <div class="Year" type="button" onClick="showMonths2016()"><p>2016</p</div>
            <div class="Month"><p>January</p></div>
            <div class="Month"><p>February</p></div>
            <div class="Month"><p>March</p></div>

    <script type="text/javascript">

        function = showMonths2016(){    
            document.getElementsByClassName("Month").style.display = "inline-block";
        }
    </script>

======代码到此结束======

所以，基本上，我将 class Month` 显示设置为 "none"（没有超过 css，抱歉，不知道如何在此处将其格式化为代码）并一次用户单击 "Div button"（class 年），它会将规定的显示值更改为 "inline-block"，显示月份 Divs:

用户点击年份 Div;
onClick事件触发函数"showMonths2016";
所述函数将月份 Divs 的显示值从 "none" 更改为 "inline-block";
月 Div 现在可见并内联对齐。

我已经测试了将 pre-setted 值（显示：none）手动更改为 "inline-block" 并且它像魔术一样工作！但是当我将它重置为 "none" 并尝试通过 onClick 事件触发它时......失败！

Answer 1

首先，您没有在第一行关闭 <p> 标签。

其次getElementsByClassNamereturns一个合集。除非你使用像 jquery.

这样的框架，否则你不能集体设置属性

正确的代码是：

HTML:

<div class="Year" type="button" onclick="showDiv()"><p>2016</p></div>
            <div class="Month" style="display:none;"><p>January</p></div>
            <div class="Month" style="display:none;"><p>February</p></div>
            <div class="Month" style="display:none;"><p>March</p></div>

Javascript:

function showDiv() {

   var elems = document.getElementsByClassName('Month');

    for(var i = 0; i != elems.length; i++)
    {
        elems[i].style.display = "block";
    }

}

现场观看：

https://jsfiddle.net/Anokrize/vq3sLtx3/

在级联 DIV 上制作 onClick 事件

Making onClick event on Cascaded DIVs

html

cascade

jscript