求一个 HTML的竖向折叠菜单源码

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求一个 HTML的竖向折叠菜单源码相关的知识，希望对你有一定的参考价值。

如题谢谢

参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>竖向的折叠菜单</title>
<script language = javascript>
function showmenu(id)
var list = document.getElementById("list"+id);
var menu = document.getElementById("menu"+id)
if (list.style.display=="none")
document.getElementById("list"+id).style.display="block";
menu.className = "title1";
else
document.getElementById("list"+id).style.display="none";
menu.className = "title";

</script>
<style type="text/css">

</style>
</head>
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu('1') ">网站制作</div>
<div id="list1" class="content" style="display:none">
<ul>
<li>div+css</li>
<li>网站设计</li>
<li>网站切图</li>
</ul>
</div>
<div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
</body>
</html>
看是你想要的吗？本回答被提问者采纳

html 折叠菜单

 const boxColapse = document.querySelectorAll('.box header') || '';

  if (boxColapse) {
    [].forEach.call(boxColapse, (box) => {
      box.addEventListener('click', (e) => {
        const item = next(e.target.parentNode);
        const size = item.querySelectorAll('.profile > li')
          .length * 30;

        if (item.style.opacity == '0') {
          item.style.opacity = '1';
          item.style.maxHeight = `${size + 100}px`;
        } else {
          item.style.opacity = '0';
          item.style.maxHeight = '0';
        }
      });
    });
  }

.box {
    display: flex;
    flex-direction: column;
    border: solid 1px #1d2129;
    padding: 20px;
    margin: 20px 20px 20px 0;
    overflow: hidden;

    >header {
        font-family: 'Montserrat';
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: 0.5px;
        color: #f7ce5b;
        margin-bottom: 20px;
        cursor: pointer;
    }

    >.box-content {
        opacity: 0;
        max-height: 0;
        transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
        -webkit-transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
        -moz-transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
        -o-transition: max-height .5s ease-in-out, opacity .5s ease-in-out;

        >ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            pointer-events: none;

            >li {
                font-family: 'Montserrat';
                font-size: 13px;
                font-weight: normal;
                font-style: normal;
                font-stretch: normal;
                line-height: 2.31;
                letter-spacing: normal;
                color: #f7f7f2;
            }
        }
    }

    &.double>.divider {
        border-bottom: solid 1px #1d2129;
        margin: 20px 0;
    }
}

 <div class="box">
  <header><h2>Perfil</h2></header>
  <div class="box-content" style="opacity: 0;">
    <ul class="profile">
      <li>Idade - 24 anos</li>
      <li>Peso - 64 kg</li>
      <li>Altura - 170 cm</li>
      <li>Busto - 95 cm</li>
      <li>Cintura - 69 cm</li>
      <li>Quadril - 106 cm</li>
      <li>Pés - 37 cm</li>
      <li>Olhos - Castanhos</li>
      <li>Cabelo - Loiro</li>
    </ul>
  </div>
</div>

<!--OU Box Duplo-->

<div class="box double">
  <header><h2>Atendimemto</h2></header>
  <div class="box-content" style="opacity: 0;">
    <ul class="profile">
      <li>Atende - Elas, Eles, Casais</li>
      <li>Locais - Hotel, Motel</li>
    </ul>
  </div>
  <div class="divider"></div>
  <header><h2>Cidades</h2></header>
  <div class="box-content" style="opacity: 0;">
    <ul class="profile">
      <li>
        Canoas, Esteio, Gramado, Novo Hamburgo, Porto Alegre, São
        Leopoldo, Sapiranga
      </li>
    </ul>
  </div>
</div>

以上是关于求一个 HTML的竖向折叠菜单源码的主要内容，如果未能解决你的问题，请参考以下文章

jquery easyui 可折叠的导航菜单这段看不懂，求详解

设计一个网页折叠菜单，如何设置它默认为关闭状态？

Bootstrap 4 右侧折叠垂直菜单

jquery实现的点击可以展开折叠的垂直导航菜单

html 折叠菜单2

html 折叠菜单

求一个 HTML的竖向折叠菜单 源码

html 折叠菜单

求一个 HTML的竖向折叠菜单源码