Menu 折叠多级手风琴下拉列表

我正在尝试向下拉垂直菜单添加第三级，这就是我所能找到的。我不能让第三层工作；我希望在单击父级时隐藏其余的级别

这是我正在使用的小提琴：

我的代码：

<ul class="ac-menu">
    <li id="one"><a href="#one">Level1</a>
        <ul class="sub-menu">
            <li><a href="#">Level2</a>
                <ul class="sub-menu">
                    <li><a href="#one">Level3 </a>
                    </li>
                    <li><a href="#one">Level3</a>
                    </li>
                    <li><a href="#one">Level3 </a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Level2</a>
            </li>
            <li><a href="#">Level2</a>
            </li>
        </ul>
    </li>
    <li id="two"><a href="#two">Level1</a>
        <ul class="sub-menu">
            <li><a href="#">Level2</a>
            </li>
            <li><a href="#">Level2</a>
            </li>
            <li><a href="#">Level2</a>
            </li>
        </ul>
    </li>
    <li id="three"> <a href="#three">Level1</a>
        <ul class="sub-menu">
            <li><a href="#">Level2 </a>
            </li>
            <li><a href="#">Level2 </a>
            </li>
        </ul>
    </li>
</ul>

---

有没有办法只使用css来实现这一点？

您是否尝试过查看（是否允许使用）jquery accordion函数？我读过它，但我只想用css来保持它的简单，我不能用它，我已经尝试了一段时间，现在我看不到它