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

<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默认是隐藏的，效果如图

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

document.querySelector(".menu-tree").onclick = function(e) {
if (e.target.className == "menu-item") {
e.target.lastElementChild.style = e.target.lastElementChild.style  == "none" ? "block" : "none"
}