JS三级可折叠菜单实现方法

JS三级可折叠菜单是一种常见的页面交互效果,下面提供一种实现方法。

实现方法

1. HTML结构

首先,需要在HTML结构中定义菜单所需要的层级结构,示例代码如下:

<ul id="menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul>
      <li>
        <a href="#">二级菜单1-1</a>
        <ul>
          <li>
            <a href="#">三级菜单1-1-1</a>
          </li>
          <li>
            <a href="#">三级菜单1-1-2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">二级菜单1-2</a>
        <ul>
          <li>
            <a href="#">三级菜单1-2-1</a>
          </li>
          <li>
            <a href="#">三级菜单1-2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">一级菜单2</a>
    <ul>
      <li>
        <a href="#">二级菜单2-1</a>
        <ul>
          <li>
            <a href="#">三级菜单2-1-1</a>
          </li>
          <li>
            <a href="#">三级菜单2-1-2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">二级菜单2-2</a>
        <ul>
          <li>
            <a href="#">三级菜单2-2-1</a>
          </li>
          <li>
            <a href="#">三级菜单2-2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

此处仅展示了一个简单的三级菜单,实际应用中可以根据需要定义更深层次的菜单。

2. CSS样式

接下来,需要定义CSS样式来控制菜单的显示与隐藏。通过控制菜单的高度、设置overflow属性为hidden,可以达到“折叠”菜单的效果。

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

#menu li {
  position: relative;
}

#menu ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  height: 0;
  overflow: hidden;
}

#menu li:hover ul {
  height: auto;
}

此处所展示的样式仅控制了菜单的基本显示与隐藏效果,实际应用中可以根据需要增加更多样式进行美化。

3. JavaScript逻辑

最后,需要定义JavaScript逻辑来控制菜单的展开与收缩。通过为菜单添加事件监听器,在用户鼠标移入/移出时设置相应的类,从而控制菜单的显示与隐藏。

var menu = document.getElementById("menu");

function setupMenu() {
  var lis = menu.getElementsByTagName("li");
  for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    var ul = li.getElementsByTagName("ul")[0];
    if (ul) {
      li.className += " has-children";
      ul.className += " hidden";
      li.onmouseover = function() {
        this.className += " hover";
        var ul = this.getElementsByTagName("ul")[0];
        if (ul) {
          ul.className = ul.className.replace("hidden", "");
        }
      };
      li.onmouseout = function() {
        this.className = this.className.replace("hover", "");
        var ul = this.getElementsByTagName("ul")[0];
        if (ul) {
          ul.className += " hidden";
        }
      };
    }
  }
}

setupMenu();

此处所展示的JavaScript逻辑控制了菜单的基本交互效果,实际应用中可以根据需要增加更多细节的处理。

示例说明

下面提供两条示例说明,以帮助读者更加深入理解这种实现方法。

示例一

在绑定事件时,可以使用事件委托的方式,将事件绑定到菜单的上级元素上,从而避免每个菜单项都需要绑定事件监听器的问题。示例代码如下:

var menu = document.getElementById("menu");

function setupMenu() {
  menu.onmouseover = function(event) {
    var target = event.target || event.srcElement;
    var li = target.closest("li");
    if (li) {
      var ul = li.getElementsByTagName("ul")[0];
      if (ul) {
        ul.className = ul.className.replace("hidden", "");
      }
    }
  };
  menu.onmouseout = function(event) {
    var target = event.target || event.srcElement;
    var li = target.closest("li");
    if (li) {
      var ul = li.getElementsByTagName("ul")[0];
      if (ul) {
        ul.className += " hidden";
      }
    }
  };
}

setupMenu();

此处所展示的代码使用了closest方法来查找最近的父级li元素,从而将事件绑定到“一级菜单”上,避免了“二级菜单”和“三级菜单”都需要绑定事件监听器的问题。

示例二

为了提高用户体验,我们可以通过CSS3动画来实现菜单的展开与收缩效果。示例代码如下:

#menu li ul {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

#menu li.hover > ul {
  height: auto;
}

此处所展示的代码为菜单的展开和收缩增加了0.3s的渐入渐出动画效果,在菜单整体布局较为简单的情况下可以大大提高用户体验。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS三级可折叠菜单实现方法 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue组件与生命周期详细讲解

    Vue组件与生命周期详细讲解 Vue.js是一款轻量级MVVM框架,由于其简洁易上手的特性,越来越多的开发者开始关注和使用它。Vue.js组件与生命周期是Vue.js开发中的重要概念,本文将对其进行详细讲解。 Vue组件 Vue组件是Vue.js中一个独立的模块,它可以封装HTML、CSS代码和JavaScript代码,用来实现某一个特定的功能。Vue组件的…

    Vue 2023年5月29日
    00
  • vue的el-select绑定的值无法选中el-option问题及解决

    当使用Vue的el-select组件时,可能会遇到无法选中el-option的问题。这个问题常见于el-option基于v-for动态渲染的情况下。 出现这个问题的原因,是因为el-select组件中v-model绑定的值和el-option组件中v-bind:value绑定的值类型不一致导致的。解决这个问题有以下两种方法: 方法一:更换v-model绑定的…

    Vue 2023年5月28日
    00
  • Vue 组件注册实例详解

    Vue 组件注册实例详解 在 Vue 中,组件是构建应用程序的核心部分之一。如果我们想要将一个特定的组件或指令作为全局组件注册,我们可以使用 Vue.component() 方法。另外,我们还可以通过在一个父组件中使用 components 选项来在该组件内部注册一个局部组件。 注册全局组件 如果我们想要在全部的组件中都使用一个组件,那么我们应该将它注册成为…

    Vue 2023年5月28日
    00
  • 详解Vue实现直播功能

    详解Vue实现直播功能 概述 Vue是一款流行的前端框架,提供了一种现代化的方式来构建交互式用户界面。在这篇文章中,我们将详细介绍如何在Vue应用中实现直播功能。 实现步骤 1. 前置条件 在开始实现直播功能之前,需要确保读者已经掌握以下的前置知识: Vue.js基础 Node.js基础 WebSocket协议 2. 构建Vue应用 首先,我们需要使用Vue…

    Vue 2023年5月28日
    00
  • vue数据操作之点击事件实现num加减功能示例

    下面是详细讲解“vue数据操作之点击事件实现num加减功能”的攻略。 使用Vue实现num加减功能 在Vue中,我们可以通过绑定点击事件实现num的加减操作。下面通过两个示例说明具体实现方法。 示例一:使用Vue实现num加减 HTML代码: <div id="app"> <h2>{{ num }}</h2&…

    Vue 2023年5月27日
    00
  • Vue模拟响应式原理底层代码实现的示例

    下面我将为你详细讲解“Vue模拟响应式原理底层代码实现的示例”的完整攻略。 什么是Vue模拟响应式原理 在Vue框架中,响应式原理是Vue实现数据绑定的重要原理,它通过数据劫持、观察者模式等技术实现了数据的变化能够自动地触发视图的更新。 在实际开发中,我们有时需要自己实现响应式原理,并且Vue框架的响应式原理实现也是值得我们去学习的。 实现方法 Vue官方提…

    Vue 2023年5月27日
    00
  • 详解在Vue中有条件地使用CSS类

    针对“详解在Vue中有条件地使用CSS类”的主题,我为大家准备了以下攻略: 1. 组件属性绑定方式 在Vue中,我们可以使用v-bind指令将一个属性绑定到组件的属性上,通过这种方式,我们就可以很方便地切换元素的样式,来达到我们的需求。 示例1: 利用v-bind指令绑定CSS类 <template> <div :class="{…

    Vue 2023年5月28日
    00
  • vue iview组件表格 render函数的使用方法详解

    Vue iView组件表格 render函数的使用方法详解 什么是 render 函数 在 Vue 中,render 函数是用来生成虚拟 DOM 的函数,它可以根据数据生成对应的 HTML 结构,并最终生成真实的 DOM 节点。 为什么需要 render 函数 在使用 iView 表格组件时,我们需要通过传入 columns、data 等参数来生成表格的列和…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部