html - 扩展折叠菜单水平 - Thinbug

扩展折叠菜单水平

时间：2016-03-30 04:45:46

标签： html css expand

如何让展开菜单栏从左向右或从右向左展开？而不是自上而下。感谢任何帮助。

当前展开菜单栏

<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 -->

预期结果

崩溃时

崩溃时

1 个答案:

答案 0 :(得分：-1)

为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>