jQ实现简单的折叠菜单

最新推荐文章于 2022-07-18 19:17:52 发布

Alicesa

最新推荐文章于 2022-07-18 19:17:52 发布

阅读量552

点赞数

分类专栏： js 前端jQuery 文章标签： html css jquery javascript

本文链接：https://blog.csdn.net/Alicesa/article/details/108424062

版权

前端jQuery 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>

<head>
  <title>折叠菜单</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>

  <div class="box">
    <ul>
      <li class="boxli"><span>一</span><span class="plus"></span>
        <ul class="ul2">
          <li>1</li>
          <li>2</li>
          <li>3</li>

        </ul>
      </li>
      <li class="boxli"><span>二</span><span class="plus"></span>
        <ul class="ul2">
          <li>1</li>
          <li>2</li>
          <li>3</li>

        </ul>
      </li>
      <li class="boxli"><span>三</span><span class="plus"></span>
        <ul class="ul2">
          <li>1</li>
          <li>2</li>
          <li>3</li>

        </ul>
      </li>
      <li class="boxli"><span>四</span><span class="plus"></span>
        <ul class="ul2">
          <li>1</li>
          <li>2</li>
          <li>3</li>

        </ul>
      </li>

    </ul>

  </div>

  <script src="js/jquery.js"></script>
  <script>
    $(function () {
      var a = 0;
      $('.boxli').click(function () {
        $(a).children('ul').slideUp().end().children('.plus').removeClass('reduce');
        $(this).children('ul').slideToggle().end().children('.plus').addClass('reduce');

      });
      //end回到之前操作元素

    });

  </script>
</body>

</html>

效果

请添加图片描述

Alicesa

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQ实现简单的折叠菜单

代码<!DOCTYPE html><html><head> <title>折叠菜单</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css" /></head><body> <div class="box"> <ul> <li
复制链接

扫一扫

专栏目录