官方bilibiliWindows破解入门Android逆向入门
【网络诊断修复工具】切换到窄版

吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步，快速开始

吾爱破解 - 52pojie.cn»网站 › 【 软件安全 】 › 『编程语言区』 › HTML代码修改增加子菜单
返回列表 发新帖
查看: 1714|回复: 5
收起左侧

[其他转载] HTML代码修改增加子菜单

[复制链接]
eenny820
eenny820 发表于 2022-4-19 01:56
本帖最后由 eenny820 于 2022-4-19 01:57 编辑

帮忙修改下以上代码。在Menu1子菜单有Item1,Item2，Item3，Item4，希望在Item1里面加多1层菜单，代码需要怎么修改，谢谢！
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=NO" />
    <title>Insert title here</title>
    <script type="text/javascript">
var itemHeight = 40;
var dividerHeight = 1;

function openMenu(obj) {
    menuTitleId = obj.id;
    menuId = "menu" + menuTitleId.substring(10);
    indicatorId = "indicator" + menuTitleId.substring(10);

    menu = document.getElementById(menuId);
    indicator = document.getElementById(indicatorId);
    height = menu.style.height;

    if (height == "0px" || height == "") {
        childAmount = menu.getElementsByTagName('div').length;
        dividerAmount = menu.getElementsByTagName('li').length;
        height = childAmount * itemHeight + dividerAmount * dividerHeight;
        menu.style.height = height + "px";
        indicator.style.transform = "rotate(180deg)";
    } else {
        menu.style.height = "0px";
        indicator.style.transform = "rotate(0deg)";
    }
}
</script>
<style>
.menus {
width: 320px;
overflow: hidden;
box-shadow: 1px 1px 4px gray;
/* border-bottom: 1px solid black;
border-top: 1px solid black; */
border: 1px solid gray;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
}

.menu {
overflow: hidden;
height: 0px;
transition: all 0.3s ease;
}

.menu_title {
width: 305px;
height: 50px;
line-height: 50px;
background: #fafafa;
color: gray;
font-size: 20px;
padding-left: 15px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
font-weight: bold;
overflow: hidden;
}

.menu_title:hover {
background: #dedede;
color: black;
}

.indicator {
width: 50px;
height: 50px;
font-weight: bold;
position: absolute;
right: 0px;
top: 0px;
transition: all 0.3s ease;
font-weight: bold;
text-align: center;
}

.item {
width: 290px;
height: 40px;
line-height: 40px;
background: gray;
color: white;
padding-left: 30px;
transition: all 0.3s ease;
cursor: pointer;
overflow: hidden;
}

.item:hover {
background: #B22222;
}

.item a {
width: 290px;
height: 40px;
display: block;
text-decoration: none;
color: white;
text-decoration: none;
}

.item_divider {
width: 322px;
height: 1px;
background: white;
display: block;
opacity: 0.8;
}

.menu_divider {
width: 100%;
height: 1px;
background: gray;
}
</style>
</head>
<body>

<div class="menus">

    <div id="menu_title1" class="menu_title">
        Menu1
        <div class="indicator" id="indicator1">^</div>
    </div>
    <div class="menu" id="menu1">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item3</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item4</a>
        </div>
    </div>

    <li class="menu_divider"></li>

    <div id="menu_title2" class="menu_title">
        Menu2
        <div class="indicator" id="indicator2">^</div>
    </div>
    <div class="menu" id="menu2">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
    </div>

    <li class="menu_divider"></li>

    <div id="menu_title3" class="menu_title">
        Menu3
        <div class="indicator" id="indicator3">^</div>
    </div>
    <div class="menu" id="menu3">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item3</a>
        </div>
    </div>
</div>
</body>
</html>
2022-04-19_015200.jpg

index.rar

1.13 KB, 下载次数: 5, 下载积分: 吾爱币 -1 CB

发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。
回复

举报

灿烂的小居
灿烂的小居 发表于 2022-4-19 07:56
[HTML] 纯文本查看 复制代码
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=NO"
    />
    <title>Insert title here</title>


    <script type="text/javascript">
      var itemHeight = 40;
      var dividerHeight = 1;

      function openMenu() {
          const obj = event.target;
        menuTitleId = obj.id;
        menuId = "menu" + menuTitleId.substring(10);
        indicatorId = "indicator" + menuTitleId.substring(10);

        menu = document.getElementById(menuId);
        indicator = document.getElementById(indicatorId);
        height = menu.style.height;

        if (height == "0px" || height == "") {
          childAmount = menu.getElementsByTagName("div").length;
          dividerAmount = menu.getElementsByTagName("li").length;
          height = childAmount * itemHeight + dividerAmount * dividerHeight;
          menu.style.height = height + "px";
          indicator.style.transform = "rotate(180deg)";
        } else {
          menu.style.height = "0px";
          indicator.style.transform = "rotate(0deg)";
        }
      }
    </script>

    <style>
      .menus {
        width: 320px;
        overflow: hidden;
        box-shadow: 1px 1px 4px gray;
        /* border-bottom: 1px solid black;
        border-top: 1px solid black; */
        border: 1px solid gray;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
      }

      .menu {
        overflow: hidden;
        height: 0px;
        transition: all 0.3s ease;
      }

      .menu_title {
        width: 305px;
        height: 50px;
        line-height: 50px;
        background: #fafafa;
        color: gray;
        font-size: 20px;
        padding-left: 15px;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        font-weight: bold;
        overflow: hidden;
      }

      .menu_title:hover {
        background: #dedede;
        color: black;
      }

      .indicator {
        width: 50px;
        height: 50px;
        font-weight: bold;
        position: absolute;
        right: 0px;
        top: 0px;
        transition: all 0.3s ease;
        font-weight: bold;
        text-align: center;
      }

      .item {
        width: 290px;
        height: 40px;
        line-height: 40px;
        background: gray;
        color: white;
        padding-left: 30px;
        transition: all 0.3s ease;
        cursor: pointer;
        overflow: hidden;
      }

      .item:hover {
        background: #b22222;
      }

      .item a {
        width: 290px;
        height: 40px;
        display: block;
        text-decoration: none;
        color: white;
        text-decoration: none;
      }

      .item_divider {
        width: 322px;
        height: 1px;
        background: white;
        display: block;
        opacity: 0.8;
      }

      .menu_divider {
        width: 100%;
        height: 1px;
        background: gray;
      }
    </style>
  </head>


  <body>
    <div class="menus" onclick="openMenu()"  >
      <div id="menu_title1" class="menu_title" >
        Menu1
        <div class="indicator" id="indicator1">^</div>
      </div>
      <div class="menu" id="menu1">
        <div class="item">
          <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
          <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
          <a href="#">Item3</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
          <a href="#">Item4</a>
        </div>
      </div>

      <li class="menu_divider"></li>

      <div id="menu_title2" class="menu_title">
        Menu2
        <div class="indicator" id="indicator2">^</div>
      </div>
      <div class="menu" id="menu2">
        <div class="item">
          <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
          <a href="#">Item2</a>
        </div>
      </div>

      <li class="menu_divider"></li>

      <div id="menu_title3" class="menu_title">
        Menu3
        <div class="indicator" id="indicator3">^</div>
      </div>
      <div class="menu" id="menu3">
        <div class="item">
          <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
          <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
          <a href="#">Item3</a>
        </div>
      </div>
    </div>
  </body>
</html>
【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
回复 支持

举报

zxinyun
zxinyun 发表于 2022-4-19 08:55
吾爱破解论坛没有任何官方QQ群，禁止留联系方式，禁止任何商业交易。
这不是该发到求助区么？
如何升级？如何获得积分？积分对应解释说明！
回复 支持

举报

zpy2
zpy2 发表于 2022-4-19 09:08
《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！
[HTML] 纯文本查看 复制代码
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=NO" />
    <title>Insert title here</title>
    <script type="text/javascript" src="/js/onerror.js">
</script>
    <script type="text/javascript">
var itemHeight = 40;
var dividerHeight = 1;

function openMenu(obj) {
    menuTitleId = obj.id;
    menuId = "menu" + menuTitleId.substring(10);
    indicatorId = "indicator" + menuTitleId.substring(10);

    menu = document.getElementById(menuId);
    indicator = document.getElementById(indicatorId);
    height = menu.style.height;

    if (height == "0px" || height == "") {
       // childAmount = menu.getElementsByTagName('div').length;
			//	alert(menuId)
		childAmount = document.querySelectorAll("#"+menuId+">.item").length;
        dividerAmount = menu.getElementsByTagName('li').length;
        height = childAmount * itemHeight + dividerAmount * dividerHeight;
        menu.style.height = height + "px";
        indicator.style.transform = "rotate(180deg)";
    } else {
        menu.style.height = "0px";
        indicator.style.transform = "rotate(0deg)";
    }
}
</script>
    <script type="text/javascript">
		function showme(obj){
	sub_idx=obj.getAttribute("data-idx");
	data_menu=obj.getAttribute("data-memu");
document.querySelector("."+sub_idx).classList.toggle("is-open");
document.querySelector("#"+data_menu).classList.add("menu_disp");

				}
</script>
<style>
.menus {
width: 320px;
overflow: hidden;
box-shadow: 1px 1px 4px gray;
/* border-bottom: 1px solid black;
border-top: 1px solid black; */
border: 1px solid gray;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
}

.menu {
overflow: hidden;
height: 0px;
transition: all 0.3s ease;
}

.menu_title {
width: 305px;
height: 50px;
line-height: 50px;
background: #fafafa;
color: gray;
font-size: 20px;
padding-left: 15px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
font-weight: bold;
overflow: hidden;
}

.menu_title:hover {
background: #dedede;
color: black;
}

.indicator {
width: 50px;
height: 50px;
font-weight: bold;
position: absolute;
right: 0px;
top: 0px;
transition: all 0.3s ease;
font-weight: bold;
text-align: center;
}

.item {
width: 290px;
height: 40px;
line-height: 40px;
background: gray;
color: white;
padding-left: 30px;
transition: all 0.3s ease;
cursor: pointer;
overflow: hidden;
}

.item:hover {
background: #B22222;
}

.item a {
width: 290px;
height: 40px;
display: block;
text-decoration: none;
color: white;
text-decoration: none;
}

.item_divider {
width: 322px;
height: 1px;
background: white;
display: block;
opacity: 0.8;
}

.menu_divider {
width: 100%;
height: 1px;
background: gray;
}
	.is-open{display:none}
	.menu_disp{overflow:auto}
</style>
</head>
<body>

<div class="menus">

    <div id="menu_title1" class="menu_title">
        Menu1
        <div class="indicator" id="indicator1">^</div>
    </div>
    <div class="menu" id="menu1">
        <div class="item" data-idx="menu1_item1_sub" data-memu="menu1" >
            <a href="#">Item1</a>
        </div>
        <div class="menu1_item1_sub is-open menu1_sub">
            <a href="#">Item12</a>
            <a href="#">Item1112</a>
            <a href="#">Item1112</a>
            <a href="#">Item1112</a>
        </div>
        <li class="item_divider"></li>
        <div class="item"  data-idx="menu1_item2_sub" data-memu="menu1"  >
            <a href="#">Item2</a>
        </div>
        <div class="menu1_item2_sub is-open menu1_sub">
            <a href="#">Item12</a>
            <a href="#">Item1112</a>
            <a href="#">Item1112</a>
            <a href="#">Item1112</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item3</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item4</a>
        </div>
    </div>

    <li class="menu_divider"></li>

    <div id="menu_title2" class="menu_title">
        Menu2
        <div class="indicator" id="indicator2">^</div>
    </div>
    <div class="menu" id="menu2">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item" data-idx="menu2_item2_sub" data-memu="menu2" >
            <a href="#">Item2</a>
        </div>
    </div>
		<div class="menu2_item2_sub is-open menu2_sub">
            <a href="#">Item12</a>
            <a href="#">Item1112</a>
            <a href="#">Item1112</a>
            <a href="#">Item1112</a>
        </div>

    <li class="menu_divider"></li>

    <div id="menu_title3" class="menu_title">
        Menu3
        <div class="indicator" id="indicator3">^</div>
    </div>
    <div class="menu" id="menu3">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item3</a>
        </div>
    </div>
</div>
</body>
</html>
呼吁大家发布原创作品添加吾爱破解论坛标识！
回复 支持

举报

zpy2
zpy2 发表于 2022-4-19 09:22
zpy2 发表于 2022-4-19 09:08
[mw_shl_code=html,true]

http://e.anyoupin.cn/ceshi/jstest/52menu_2.html

演示地址
如何快速判断一个文件是否为病毒！
回复 支持

举报

eenny820
 楼主| eenny820 发表于 2022-4-19 12:46
zpy2 发表于 2022-4-19 09:22
http://e.anyoupin.cn/ceshi/jstest/52menu_2.html

演示地址

谢谢了，大神
回复 支持

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 07:32

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表