gpt4 book ai didi

html - 水平展开折叠菜单

转载 作者:太空宇宙 更新时间:2023-11-03 19:29:34 25 4
gpt4 key购买 nike

如何使展开菜单栏从左向右或从右向左展开?而不是自上而下。感谢您提供的任何帮助。

当前展开菜单栏

<HTML>

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>

<BODY>
<form name="mainfrm" method="post">


<table width="100%" height="50%" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">
<div style="position:relative;top:0;left:0;z-index:2;background-color:#F0F0F0;">
<div id="demo" class="collapse in">
<div class="div-table">testing content</div>
<div class="div-table-row">testing content</div>
<div class="div-table-col">testing content</div>
</div>
<a data-toggle="collapse" data-target="#demo" style="margin-left:50%;">
<img src="http://www.oneequallmusick.org/frame/images/uparrow.png" width="25px" height="20px">
</a>
</div>

<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left ">TOP FRAME</td>
<td width="45% ">TOP FRAME</td>
</tr>
</table>
</form>
</BODY>

</HTML>

How can i make the expand menu bar expand from left to right or right to left ? instead of top down. Appreciated for any helps.

current expand menu bar
--
<!-- begin snippet: js hide: false -->

预期结果

崩溃的时候 enter image descriptiodsdahere

崩溃时 enter image description here

最佳答案

为 td 元素添加了 z-index 属性:

<table width="100%" height="50%" id="tbl" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">

<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left ">TOP FRAME</td>
<td width="42% ">TOP FRAME</td>
<td width="3%">
<div>

<img src="http://www.oneequallmusick.org/frame/images/uparrow.png" style="display:inline;" width="25px" height="20px" id="im1" onClick="javascript:document.getElementById('demo1').style.display='inline';document.getElementById('im1').style.display='none';document.getElementById('im2').style.display='inline';">
<img src="http://www.oneequallmusick.org/frame/images/uparrow.png" style="display:none;" width="25px" height="20px" id="im2" onClick="javascript:document.getElementById('demo1').style.display='none';document.getElementById('im2').style.display='none';document.getElementById('im1').style.display='inline';">

</div></td>
<td id="demo1" style="position:relative;z-index:-1;display:none;">
<div id="demo" style="position:relative;background-color:#F0F0F0;" class="collapse in">
<div class="div-table">testing content</div>
<div class="div-table-row">testing content</div>
<div class="div-table-col">testing content</div></div>
</td></tr>
</table>

关于html - 水平展开折叠菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36299895/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com