案例菜单折叠

华实coding

已于 2024-08-02 11:32:33 修改

阅读量86

点赞数 3

分类专栏： web开发入门 HTML标签文章标签： javascript

于 2024-08-01 20:36:25 首次发布

本文链接：https://blog.csdn.net/2301_77417010/article/details/140856647

版权

web开发入门同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML标签

3 篇文章 0 订阅

订阅专栏

点击实现展开与折叠

通过定义样式 .hide{display:none;}, 实现内容的隐藏；

通过onlick与JavaScript函数的联合，实现hide的增删，实现内容的展开与折叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .menus{width:200px;height:800px;border:1px solid red;}
    .menus  .header{background:gold;padding:10px 20px;cursor:pointer;}
    .menus  .content a{display:block;padding:5px 5px;border-bottom:1px dotted #dddddd;}
    .hide{display:none;}
  </style>
</head>
<body>
<div class="menus">
  <div class="item">
    <div class="header" onclick="clickMe(this);">上海</div>
    <div class="content hide">
      <a href="">徐汇区</a>
      <a href="">浦东新区</a>
      <a href="">闵行区</a>
    </div>
    </div>

  <div class="item">
    <div class="header" onclick="clickMe(this);">北京</div>
    <div class="content hide">
      <a href="">西城区</a>
      <a href="">海淀区</a>
      <a href="">昌平区</a>
    </div>
  </div>

 </div>
  <script src="static/js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    function clickMe(self){
    var hasHide=$(self).next().hasClass("hide");
    if(hasHide){
    $(self).next().removeClass("hide");
    }else{
    $(self).next().addClass("hide");
    }
    }
  </script>
</body>
</html>

初始界面

点击“上海”

再次点击“上海”，复原

点击实现单个展开

实现打开一个大标题时，其他标题折叠起来。

 <script type="text/javascript">
    function clickMe(self){
    var hasHide=$(self).next().hasClass("hide");
    if(hasHide){
    $(self).next().removeClass("hide");
    }else{
    $(self).next().addClass("hide");
    }
    }
 </script>