1. Python技术站首页
  2. css

jquery实现可点击伸缩与展开的菜单效果代码

• css
yizhihongxing

这里简单讲解一下如何使用jQuery实现可点击伸缩与展开的菜单效果。

概述

这里将展示如何通过jQuery来实现一个可点击伸缩与展开的菜单效果，步骤如下：

  1. HTML结构：设置菜单的HTML结构，包含一级菜单和二级菜单。
  2. CSS样式：设置菜单的样式，使之具备可伸缩和展开的效果。
  3. jQuery脚本：通过jQuery脚本来实现菜单的点击伸缩与展开效果。

HTML结构

首先先来看一下需要实现的HTML结构，如下所示：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1-1</a></li>
        <li><a href="#">子菜单1-2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单2-1</a></li>
        <li><a href="#">子菜单2-2</a></li>
      </ul>
    </li>
  </ul>            
</div>

这里我们采用ul和li的层级嵌套方式来实现菜单的伸缩与展开。

CSS样式

接下来先给菜单设置一些基本样式，再添加一些控制展开和收缩的样式。如下所示：

.menu ul{
  list-style:none;
  margin:0;
  padding:0;
}
/* 一级菜单 */
.menu > ul > li{
  position:relative;
  margin-bottom:1px;
  background:#eee;
}
/* 二级菜单 */
.menu ul ul{
  display:none;
}
.menu ul li ul li{
  background:#fff;
}
/* 控制展开和收缩的样式 */
.submenu-open:before{
  content: "-";
}
.submenu-closed:before{
  content: "+";
}

这里先设置了一级菜单和二级菜单的样式，以及控制展开和收缩的样式。其中，通过:before伪元素来控制‘-’和"+"的显示。

jQuery脚本

这是关键部分了，下面就来介绍如何通过jQuery脚本实现可点击伸缩与展开的菜单效果。如下所示：

$(function(){
  $('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
    e.stopPropagation();
    $(this).toggleClass('submenu-open').children('ul').slideToggle();
  });
});

这里采用了事件委托的方式来监听li元素的点击事件，其中surround元素为class为menu的元素，语法为$('.menu')。通过获得点击的元素的子类来进行下一步操作。

示例说明

示例1

通过一个简单的示例来看一下具体的效果。首先，我们加入一个HTML文档，并引入jQuery库。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery菜单效果</title>
  <style>
    .menu ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .menu > ul > li{
      position:relative;
      margin-bottom:1px;
      background:#eee;
    }
    .menu ul ul{
      display:none;
    }
    .menu ul li ul li{
      background:#fff;
    }
    .submenu-open:before{
      content: "-";
    }
    .submenu-closed:before{
      content: "+";
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function(){
      $('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
        e.stopPropagation();
        $(this).toggleClass('submenu-open').children('ul').slideToggle();
      });
    });
  </script>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">菜单1</a>
        <ul>
          <li><a href="#">子菜单1-1</a></li>
          <li><a href="#">子菜单1-2</a></li>
        </ul>
      </li>
      <li><a href="#">菜单2</a>
        <ul>
          <li><a href="#">子菜单2-1</a></li>
          <li><a href="#">子菜单2-2</a></li>
        </ul>
      </li>
    </ul>            
  </div>
</body>
</html>

示例2

接下来为了证明示例1的正确运行，将增加一个更加复杂的菜单，包含多级伸缩和展开菜单。如下所示：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1-1</a></li>
        <li><a href="#">子菜单1-2</a></li>
        <li><a href="#">子菜单1-3+</a>
          <ul>
            <li><a href="#">子菜单1-3-1</a></li>
            <li><a href="#">子菜单1-3-2</a></li>
            <li><a href="#">子菜单1-3-3+</a>
              <ul>
                <li><a href="#">子菜单1-3-3-1</a></li>
                <li><a href="#">子菜单1-3-3-2</a></li>
                <li><a href="#">子菜单1-3-3-3+</a>
                  <ul>
                    <li><a href="#">子菜单1-3-3-3-1</a></li>
                    <li><a href="#">子菜单1-3-3-3-2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单2+</a>
      <ul>
        <li><a href="#">子菜单2-1</a></li>
        <li><a href="#">子菜单2-2</a></li>
        <li><a href="#">子菜单2-3+</a>
          <ul>
            <li><a href="#">子菜单2-3-1</a></li>
            <li><a href="#">子菜单2-3-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>            
</div>

同样的操作，将其包含进示例1中，结果如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery菜单效果</title>
  <style>
    .menu ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .menu > ul > li{
      position:relative;
      margin-bottom:1px;
      background:#eee;
    }
    .menu ul ul{
      display:none;
    }
    .menu ul li ul li{
      background:#fff;
    }
    .submenu-open:before{
      content: "-";
    }
    .submenu-closed:before{
      content: "+";
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function(){
      $('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
        e.stopPropagation();
        $(this).toggleClass('submenu-open').children('ul').slideToggle();
      });
    });
  </script>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">菜单1</a>
        <ul>
          <li><a href="#">子菜单1-1</a></li>
          <li><a href="#">子菜单1-2</a></li>
          <li><a href="#">子菜单1-3+</a>
            <ul>
              <li><a href="#">子菜单1-3-1</a></li>
              <li><a href="#">子菜单1-3-2</a></li>
              <li><a href="#">子菜单1-3-3+</a>
                <ul>
                  <li><a href="#">子菜单1-3-3-1</a></li>
                  <li><a href="#">子菜单1-3-3-2</a></li>
                  <li><a href="#">子菜单1-3-3-3+</a>
                    <ul>
                      <li><a href="#">子菜单1-3-3-3-1</a></li>
                      <li><a href="#">子菜单1-3-3-3-2</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">菜单2+</a>
        <ul>
          <li><a href="#">子菜单2-1</a></li>
          <li><a href="#">子菜单2-2</a></li>
          <li><a href="#">子菜单2-3+</a>
            <ul>
              <li><a href="#">子菜单2-3-1</a></li>
              <li><a href="#">子菜单2-3-2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>            
  </div>
</body>
</html>

总结

通过这个实例，我们学会了使用jQuery来实现可点击伸缩和展开的菜单效果，也加深了对jQuery的基本语法的理解。希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现可点击伸缩与展开的菜单效果代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • html5开发三八女王节表白神器

    下面是HTML5开发“三八女王节表白神器”的完整攻略： 前言 三八女王节即将到来，HTML5技术可以为我们打造出一个极具创意的表白神器。以下教程将为你详细讲解制作过程。 准备工作 给你的页面起一个标题: <!DOCTYPE html> <html> <head> <title>三八女王节表白神器</tit…

    css 2023年6月10日
    00

  • CSS网页实例 利用box-sizing实现div仿框架结构实现代码

    下面我会提供一个详细的攻略来讲解“CSS网页实例 利用box-sizing实现div仿框架结构实现代码”。首先，我们需要了解box-sizing的概念。 box-sizing是CSS3中的一个属性，用于指定盒子的尺寸计算模式，默认值为content-box。在content-box模式下，盒子的宽度和高度只包括内容的尺寸，而不包括边框和内边距的尺寸。而在bo…

    css 2023年6月10日
    00

  • 纯CSS实现酷黑风格三级下拉菜单效果代码

    下面是详细讲解“纯CSS实现酷黑风格三级下拉菜单效果代码”的完整攻略。 版本要求 CSS3 HTML5 效果演示 点击此处查看效果演示 示例HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>纯C…

    css 2023年6月10日
    00

  • 一文详解如何在Vue3中使用jsx/tsx

    一文详解如何在Vue3中使用jsx/tsx 在Vue 3 中，支持使用 JSX 和 TSX 语法来开发 Vue 组件。本文将详细讲解如何在 Vue 3 中使用 JSX 和 TSX 语法来编写组件。 注意：在使用开发环境前，请确保你已经正确安装好了 Vue 3 和相关依赖。 安装依赖 使用 JSX 和 TSX 语法来开发 Vue 组件，我们需要安装以下依赖： …

    css 2023年6月10日
    00

  • 仿Word自动套用格式使用CSS设置表格样式实例

    那我就给您逐步讲解一下如何实现“仿Word自动套用格式使用CSS设置表格样式”的攻略。 一、设置表格样式 首先，在 \ 标签中添加样式表： <style> /* 表格样式 */ table { border-collapse: collapse; width: 100%; margin-top: 20px; margin-bottom: 20px…

    css 2023年6月9日
    00

  • 表格奇偶行设置不同颜色的核心JS代码

    下面是详细讲解“表格奇偶行设置不同颜色的核心JS代码”的完整攻略，希望能为您提供帮助。 一、需求描述 我们需要让表格的奇偶行显示不同的背景色，让表格更易于阅读。 二、实现思路 首先，需要获取所有的表格行。 接着，需要使用 JavaScript 循环遍历表格行。 判断每一行的索引值是否是奇数或偶数。 根据判断的结果，设置不同的背景色。 三、核心JS代码 con…

    css 2023年6月9日
    00

  • CSS3 选择器 伪类选择器介绍

    CSS3 选择器 伪类选择器介绍 CSS3 选择器和伪类选择器是 CSS 中非常重要的一部分，可以帮助开发者更加精确地选择和控制 HTML 元素的样式。以下是关于 CSS3 选择器和伪类选择器的完整攻略。 CSS3 选择器 CSS3 选择器是一种用于选择 HTML 元素的方法，可以根据元素的标签名、类名、ID、属性等特征进行选择。以下是一些常见的 CSS3 …

    css 2023年5月18日
    00

  • css line-height属性的使用技巧

    当我们在设计网页时，使用CSS来控制文本显示是非常重要的。其中，line-height属性可以帮助我们控制文本的行间距，进而影响到整个网页的排版效果。在这里，我将详细讲解“CSS line-height属性的使用技巧”这个话题。 line-height的基本用法 line-height属性用于指定行高。它可以使用像素值、百分比值、em值等多个单位进行设置。在…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部