如何实现点击<li>显示<dl>内容？

Question

<div class="menu">
<ul class="menu-tree">
    <li class="menu-item">
    <a href="">信息查询</a>
    <dl class="menu-item-child">
      <dd>功能一</dd>
        <dd>功能二</dd>
        <dd>功能三</dd>
    </dl>
    </li>
    <li class="menu-item">
    <a href="">信息查询</a>
    <dl class="menu-item-child">
      <dd>功能一</dd>
        <dd>功能二</dd>
        <dd>功能三</dd>
    </dl>
    </li>
</ul>
</div>

dl默认是隐藏的，效果如图

Answer 1

如果隐藏为display:none,那就点击li将dl的display = block就可以实现点击显示隐藏