html+jquery树形菜单,CSS+HTML+JQuery简单菜单

HTML + jQuery 树形菜单的实现可以分为以下几个步骤：

1. HTML 结构设计

<div class="tree">
  <ul>
    <li>
      <span class="tree-node">节点1</span>
      <ul>
        <li>
          <span class="tree-node">节点1.1</span>
        </li>
        <li>
          <span class="tree-node">节点1.2</span>
        </li>
      </ul>
    </li>
    <li>
      <span class="tree-node">节点2</span>
      <ul>
        <li>
          <span class="tree-node">节点2.1</span>
        </li>
        <li>
          <span class="tree-node">节点2.2</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. CSS 样式设计

.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree .tree-node {
  cursor: pointer;
}

.tree .tree-node:hover {
  background-color: #eee;
}

3. jQuery 代码实现

$(document).ready(function() {
  // 隐藏所有子节点
  $('.tree ul').hide();

  // 点击父节点展开/收起子节点
  $('.tree-node').click(function() {
    $(this).parent().children('ul').toggle();
  });
});

这样就完成了一个简单的 HTML + jQuery 树形菜单的实现。

另外，如果只是一个简单的菜单，可以使用 CSS 和 HTML 实现：

<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.menu a:hover {
  background-color: #eee;
}

这样就完成了一个简单的 CSS + HTML 菜单的实现。