Question

我有一个扩展内容，但是我如何使用javascript将其展开以扩展内容而不点击它？我需要在页面加载时显示内容。

<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>
   <script>
   function toogle()
   {
        // how to use javascript to toogle the expand content
   } 
   </script>
  </HEAD>    
  <BODY onload="toogle();">
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <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>

Answer 1

只需将课程in添加到div #demo即可。这将告诉bootstrap默认打开折叠。

＆＃13;

<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>
   <script>
   function toogle()
   {
        // how to use javascript to toogle the expand content
   } 
   </script>
  </HEAD>    
  <BODY onload="toogle();">
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse in">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <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>

＆＃13;

希望有所帮助！

Answer 2

只需添加＆＃39; in＆＃39; class to div #demo。示例：

＆＃13;

<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>
   <script>
   function toogle()
   {
        // how to use javascript to toogle the expand content
   } 
   </script>
  </HEAD>    
  <BODY onload="toogle();">
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse in">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <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>

＆＃13;

Answer 3

如果你不想使用bootstrap类，你可以简单地调用

demo.style.display = 'block';
demo.style.height = 'auto';

但强烈建议使用bootstrap类!!!

希望有所帮助

Javascript触发崩溃/扩展内容

3 个答案: