jquery树形菜单例子？以下是一个简单的基于jQuery的树形菜单示例。在这个示例中，我们将创建一个具有父子关系的项目列表，并使用jQuery来使其成为可展开和可折叠的树形菜单。htmljQuery树形菜单示例</p><p><style></p><p>.tree {</p><p>list-style-type: none</p><p>padding-left: 20px</p><p>}</p><p>.tree li {</p><p>margin: 0</p><p>padding: 10px 0</p><p>position: relative</p><p>}</p><p>.tree li::before {</p><p>content: </p><p>position: absolute</p><p>top: 0</p><p>left: -20px</p><p>border-left: 1px solid #000</p><p>height: 100%</p><p>}</p><p>.tree li.collapsed::before {</p><p>border-left: 1px solid #000</p><p>border-bottom: 1px solid #000</p><p>transform: rotate(-90deg)</p><p>}</p><p>.tree ul {</p><p>display: none</p><p>margin: 0</p><p>padding: 0</p><p>list-style-type: none</p><p>}</p><p></style></p><p></head></p><p><body></p><p><ul class=tree></p><p><li class=collapsed>Parent 1</p><p><ul></p><p><li>Child</p><p>1.1</li></p><p><li>Child</p><p>1.2</li></p><p></ul></p><p></li></p><p><li class=collapsed>Parent 2</p><p><ul></p><p><li>Child</p><p>2.1</li></p><p><li>Child</p><p>2.2</li></p><p></ul></p><p></li></p><p></ul></p><p></p><p>$(document).ready(function(){</p><p>// 添加单击事件以展开/折叠项目</p><p>$(.tree li).click(function () {</p><p>$(this).toggleClass(collapsed)</p><p>$(this).children(ul).toggle()</p><p>})</p><p>})</p><p></p><p></body></p><p></html></p><p>jQuery树形菜单可以通过递归的方式实现，使用ul和li标签来表示菜单的层级结构。通过jQuery的事件绑定和CSS样式设置，可以实现菜单的展开和收起、选中和取消等功能。同时，可以通过Ajax请求或者JSON数据来动态生成菜单的内容。最终实现一个美观、简洁、易用的树形菜单。</p>
