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

这里简单讲解一下如何使用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)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS3过渡transition效果实例介绍

    下面是关于“CSS3过渡transition效果实例介绍”的完整攻略。 基本介绍 CSS3过渡(transition)在前端页面开发中常用于实现动画效果,通过在某些属性值发生变化时,过渡到新属性值从而呈现出平滑的动画效果。通常情况下,我们会使用transition property指明需要过渡的属性、 transition duration指明过渡的时间长度…

    css 2023年6月10日
    00
  • CSS控制Table内外边框、颜色、大小示例

    下面我将详细讲解如何使用CSS控制HTML表格(Table)的内外边框、颜色和大小。 CSS控制表格外边框 表格外边框由表格的边框和表格外边距组成。CSS提供了多个属性,可以控制表格的外边框。以下是常用的属性及其用法: border属性 border属性用于设置表格的边框样式、宽度、颜色。 table { border: 1px solid black; }…

    css 2023年6月9日
    00
  • JavaScript实现元素滚动条到达一定位置循环追加内容

    那么让我们来详细讲解一下如何使用JavaScript实现元素滚动条到达一定位置循环追加内容的方法: 1. 监听滚动事件 首先,需要在JavaScript中监听元素的滚动事件,可以通过addEventListener来实现,代码示例如下: const box = document.getElementById(‘box’); box.addEventListe…

    css 2023年6月10日
    00
  • css中float:right右对齐元素会换行不在同一条线上

    CSS中float:right属性是用于将元素向右浮动,但是当使用float:right时,右对齐元素会换行不在同一条线上的情况很常见。其原因是当一个元素被设置float:right后,它会尽量靠右排列,但排列的过程中可能因为行宽不够等限制条件而被迫换行,导致右对齐的元素不在同一条线上。下面是两条示例说明: 示例1 考虑以下HTML代码: <div c…

    css 2023年6月10日
    00
  • 怎么使用dreamweaver制作网页教程 dw建站设计网页

    大家好,本篇教程将详细讲解如何使用Dreamweaver制作网页以及建站设计网页的完整攻略。 准备工作 首先,我们需要准备好以下工具和材料: Dreamweaver软件 浏览器(推荐使用Google Chrome、Firefox、Safari) 文本编辑器(如Notepad++、Sublime Text等) 步骤一:创建新网页 打开Dreamweaver软件…

    css 2023年6月10日
    00
  • js实现的Easy Tabs选项卡用法实例

    下面是详细的js实现选项卡的攻略,包含了具体的实现过程、代码示例和注意事项。 js实现的Easy Tabs选项卡用法实例 简介 选项卡是一种经典的交互式UI组件,主要用于在有限的屏幕空间内展示多个内容区块。js实现的Easy Tabs选项卡就是其中的一种,比起使用CSS实现,使用js实现可以更加灵活,可定制性更强。 基本原理 js实现的选项卡主要原理是,通过…

    css 2023年6月11日
    00
  • 纯css制作带三角的边框(附效果图)

    下面开始讲解“纯css制作带三角的边框(附效果图)”的完整攻略。 1.需求分析 在页面样式设计中,时常需要添加一些边框来美化页面,如果能够在边框中添加三角形的图形,将会让页面更加丰富和美观。 2.样式实现 首先,我们需要在HTML的某个元素上添加一个类名,假设我们添加的类名为”triangle”。接下来,我们通过以下步骤实现带三角的边框。 2.1 给元素添加…

    css 2023年6月10日
    00
  • JS获取和修改元素样式的实例代码

    当我们开发网页时,经常需要通过JavaScript获取元素样式,并修改元素的样式来实现各种交互效果。接下来,我将为您介绍获取和修改元素样式的实例代码。 获取元素样式 要获取元素的样式,我们可以使用getComputedStyle()函数。getComputedStyle()函数需要传递两个参数:要获取样式的元素和伪类(如果没有伪类则传递null)。这个函数返…

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