jQuery实现树形菜单

jQuery实现树形菜单
html代码：
ul, li {
margin: 0px;
padding: 0px;
}
.treeMenu {
}
ul li a {
text-decoration: none;
color: black;
}
.hidden {
display: none;
}
img {
width:20px;
height:20px;
}

<h2><img src="~/Content/t012ca4ac89037218f7.jpg"/>树形菜单</h2>
<ul class="treeMenu">
    <li>
        <img src="~/Content/t012ca4ac89037218f7.jpg" />
        <a id="China" href="javascript:void(0);">中国人民</a>
        <ul class="hidden">
            <li><img src="~/Content/t012ca4ac89037218f7.jpg" /><a href="javascript:void(0);">中国人民</a></li>
            <li><img src="~/Content/t012ca4ac89037218f7.jpg" /><a href="javascript:void(0);">中国人民</a></li>
            <li><img src="~/Content/t012ca4ac89037218f7.jpg" /><a href="javascript:void(0);">中国人民</a></li>
        </ul> </li> <li>
        <img src="~/Content/t012ca4ac89037218f7.jpg" />
        <a id="HongKong" href="javascript:void(0);">加油香港</a>
        <ul class="hidden">
            <li><img src="~/Content/t012ca4ac89037218f7.jpg" /><a href="javascript:void(0);">香港加油</a></li>
            <li><img src="~/Content/t012ca4ac89037218f7.jpg" /><a href="javascript:void(0);">香港加油</a></li>
            <li><img src="~/Content/t012ca4ac89037218f7.jpg" /><a href="javascript:void(0);">香港加油</a></li>
        </ul> </li>  </ul>

JS代码：

方法一,需要给点击的a元素加id属性
获取当前点击的a元素的id值
var idName = $(this).attr(“id”);
对象紧跟着当前点击的a元素的ul进行类样式反转
$("#" + idName + " + ul").toggleClass(“hidden”);
方法二,需要给点击的a元素加id属性
对象紧跟着当前点击的a元素的元素进行类样式反转
$(this).next().toggleClass(“hidden”);
方法三,不需要给点击的a元素加id属性
对象紧跟着当前点击的a元素的元素进行类样式反转

效果图：

来源：https://blog.csdn.net/weixin_44588757/article/details/99701496