JQuery 树形菜单

17 Mar 2025 | 6 分钟阅读

在本文中，我们将借助 jQuery 创建一个 jQuery 树形菜单。在本文的开头，我们将学习 jQuery 和树形菜单的基础知识。之后，我们将借助各种示例学习树形菜单。

什么是 jQuery？

jQuery 是一个快速、轻量级、小巧且功能丰富的 JavaScript 库。要将 jQuery 添加到 HTML 页面，我们可以使用 <script> 标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>

在此，src 属性是我们可以添加 jQuery 来源的地方。

您也可以下载 jQuery 并将 jQuery 的来源添加到 <script> 标签的 src 属性中。

什么是 JQuery 树形菜单？

jQuery 树形菜单表示菜单的层次结构视图，其中每个菜单项可以有多个子菜单项。

让我们来看一下 jQuery 树形菜单的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>  jQuery tree menu </title>
<style>
body {
  background: #e39900;
  overflow: hidden;
  overflow-y: auto;
  color: black;
  font-size: 20px;
  font-weight: 2px solid;
  text-align: center;
}
p {
  position: relative;
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
ul {
  list-style-type: none;
text-transform: uppercase;
  font-weight: 500;
}
#myUL {
  list-style-type: none;
}
#myUL {
  margin: 0;
  padding: 0;
}
.box {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
h2 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.box::before {
  content: "\2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.check-box::before {
  content: "\2611"; 
  color: dodgerblue;
}
.nested {
  display: none;
}
.active {
  display: block;
}
</style>
</head>
<body>
<h2> Example </h2>
<p> A tree view represents a hierarchical view of information, where each item can have a number of subitems. </p>
<p> Click on the box(es) to open or close the tree branches. </p>
<ul id="myUL">
  <li> <span class="box"> Beverages </span>
    <ul class="nested">
      <li> Water </li>
      <li> Coffee </li>
      <li> <span class="box"> Tea </span>
        <ul class="nested">
          <li> Black Tea </li>
          <li> White Tea </li>
          <li> <span class="box"> Green Tea </span>
            <ul class="nested">
              <li> Sencha </li>
              <li> Gyokuro </li>
              <li> Matcha </li>
              <li> Pi Lo Chun </li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
</ul>
<script>
var toggler = document.getElementsByClassName("box");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("check-box");
  });
}
</script>
</body>
</html>

说明

在上面的示例中，我们借助 jQuery 创建了一个树形菜单。当用户单击箭头时，将显示下拉树形菜单。

输出

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>  jQuery tree menu </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap') repeat scroll 0 0 rgba(0, 0, 0 , 0);
body {
  background: #fff;
}
.wrapper {
  animation: scroll 70s linear infinite;
  color: white;
}
@keyframes scroll {
   100%{
    background-position: 0px -3000px;
  }
}
@media (prefers-reduced-motion) {
  .wrapper {
    animation: scroll 200s linear infinite;
  }
}
@media (min-width: 670px) {
  .title {
    font-size: 5rem;
  }
}
#Menu-list {
    margin: 4em 0 0 2em;
    width: 20em;
    list-style-type: none;
    color: white;
}
#Menu-list > li {
    padding-bottom: 3px;
    color: white;
}
#Menu-list  li > a {
    text-decoration: none;
    color: white;
}
#Menu-list  li > a:after {
    content: '+';
    padding-right: 4px;
    font-weight: bold;
    color: white;
}
#Menu-list  li > a.active:after {
    content: '-';
    padding-right: 4px;
    font-weight: bold;
}
#Menu-list li ul {
    margin: 0.5em 0 0.5em 2em;
    display: none;
    list-style-type: none;
}
h2 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
p {
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
</style>
</head>
<body class="wrapper">
<h2> Example: <p> jQuery tree menu </p> </h2>
<ul id="Menu-list">
    <li>
        <a href="#" class="tree-parent-anchor"> Menu 1 </a>
        <ul>
              <li> Menu 1.1 </li>
              <li>
                  <a href="#" class="tree-parent-anchor"> Menu 1.2 </a>
                  <ul>
                      <li> Menu 1.2.1 </li>
                      <li> Menu 1.2.2 </li>
                  </ul>
              </li>
              <li> Menu 1.3 </li>
          </ul>
    </li>
    <li>
        <a href="#" class="tree-parent-anchor"> Menu 2 </a>
          <ul>
              <li> Menu 2.1 </li>
              <li> Menu 2.2 </li>
              <li> Menu 2.3 </li>
              <li> Menu 2.4 </li>
          </ul>
    </li>
    <li> Menu 3 </li>
</ul>
<ul id="Menu-list">
    <li>
        <a href="#" class="tree-parent-anchor"> Menu 1 </a>
        <ul>
              <li> Menu 1.1 </li>
              <li>
                  <a href="#" class="tree-parent-anchor"> Menu 1.2 </a>
                  <ul>
                      <li> Menu 1.2.1 </li>
                      <li> Menu 1.2.2 </li>
                  </ul>
              </li>
              <li> Menu 1.3 </li>
          </ul>
    </li>
    <li>
        <a href="#" class="tree-parent-anchor"> Menu 2 </a>
          <ul>
              <li> Menu 2.1 </li>
              <li> Menu 2.2 </li>
              <li> Menu 2.3 </li>
              <li> Menu 2.4 </li>
          </ul>
    </li>
    <li> Menu 3 </li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script>
var treeList = {
    init: function() {
        $('.tree-parent-anchor', '#Menu-list').each(function() {
            var $a = $(this);
            var $li = $a.parent();
            if ($a.next().is('ul')) {
                var $ul = $a.next();
                $a.click(function(e) {
                    e.preventDefault();
                    treeList.collapse($ul);
                    $a.toggleClass('active');
                });
            }
        });
    },
    collapse: function(element) {
        element.slideToggle(600);
    }
};
treeList.init();
</script>
</body>
</html>

说明

在上面的示例中，我们借助 jQuery 创建了一个树形菜单。当用户单击菜单时，将显示下拉树形菜单。

输出

以下是此示例的输出

示例 3

<! DOCTYPE html>
<html>
<head>
<title>
         JQuery tree menu
      </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap" rel="stylesheet"> 
<style>
ul {
  list-style-type: none;
}
#myUL {
  list-style-type: none;
}
#myUL {
  margin: 0;
  padding: 0;
}
.caret {
  cursor: pointer;
  -webkit-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.caret-down::before {
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); 
  color: #fff;
}
.nested {
  display: none;
}
.active {
  display: block;
}
h2 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
   text-align: center;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
p {
  position: relative;
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  transform:translateY (50%);
}
</style>
</head>
<body>
<h2> Example </h2>
<p> A tree view represents a hierarchical view of information, where each item can have a number of sub items. </p>
<p> Click on the arrow(s) to open or close the tree branches. </p>
<ul id="myUL">
  <li> <span class="caret"> Beverages </span>
    <ul class="nested">
      <li> Water </li>
      <li> Coffee </li>
      <li> <span class="caret"> Tea </span>
        <ul class="nested">
          <li> Black Tea </li>
          <li> White Tea </li>
          <li> <span class="caret"> Green Tea </span>
            <ul class="nested">
              <li> Sencha </li>
              <li> Gyokuro </li>
              <li> Matcha </li>
              <li> Pi Lo Chun </li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
</ul>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
</script>
</body>
</html>

说明

在上面的示例中，我们借助 jQuery 创建了一个树形菜单。当用户单击菜单时，将显示下拉树形菜单。

输出

以下是此示例的输出