1. 首页
  2. 问答
  3. 为什么这部分html不可见？

为什么这部分html不可见？

2013-10-15 60 views
0

我是新来的移动jQuery和HTML，我试图插入一个可折叠集到另一个div。为什么这部分html不可见？

但我不明白为什么父div不可见。我能够看到可折叠的组合，但不能看到其他组合。

我该如何解决这个问题？

<!DOCTYPE html> 


<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Creator</title> 
    <link rel="stylesheet" href="creator.css"> 
    <script type="text/javascript" src="jquery-2.0.1.js"></script> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
    <style> 
    html, body { padding: 0; margin: 0; } 
    html, .ui-mobile, .ui-mobile body { 
     height: 235px; 
    } 
    .ui-mobile, .ui-mobile .ui-page { 
     min-height: 235px; 
    } 
    .ui-content{ 
     padding:10px 15px 0px 15px; 
    } 
    </style> 
    <style> 
     body { padding-top: 60px; } 
     table { width: 100%; } 
     td, th {text-align: left; white-space: nowrap;} 
     td.numeric, th.numeric { text-align: right; } 
     h2, h3 {margin-top: 1em;} 
     section {padding-top: 40px;} 
    </style> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.css"> 


</head> 



<body> 
    <div class="container"> 
     <div class="row-fluid"> 
      <div class="span12" > 
       <center><h2>Interface</h2></center> 
      </div> 
     </div> 
    </div> 
    <div style="border:3px solid #C0504D;" class="rounded-corners1"> 
     <div class="container" style="margin-top:10px;"> 
      <div class="row"> 
       <div class="span2"><p></p></div> 
       <div class="span8 rounded-corners text-center" style="color:white;background-color:#4F81BD;border:3px solid #1D3C8B;"> 
        <h2>Creation Interface</h2> 
       </div> 
       <div class="span2"><p></div> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="span2 text-center" style="font-size:20px;"> Base SID: </div> 
       <div class='span2'><input disabled class='text-center rounded-corners'value="<?php echo $sid;?>" id="sid" style="background-color:#4F81BD;border:3px solid #1D3C8B;color:white;font-size:18px;"></div> 
       <div class="span2"></div> 
       <div class="span2 text-center" style="font-size:20px;"> Output File: </div> 
       <div class='span2'><input disabled class='text-center rounded-corners'value=" " id="output" style="background-color:#4F81BD;border:3px solid #1D3C8B;color:white;font-size:18px;"></div> 
      </div> 
     </div> 
     <div class='rounded-corners1 col-md-6 col-md-offset-3' style="margin:20px 5px 5px 5px;background-color:#4BACC6;border:3px solid #357D91;text-align:center;color:white; "> 
      <div style="margin:30px;"> 
       <div data-role="page" style="max-height: 240px; min-height: 238px;" tabindex="0" class="ui-page ui-body-c ui-page-active"> 
        <div data-role="content" class="ui-content" role="main"> 
         <div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" class="ui-collapsible-set ui-corner-all"> 
          <div data-role="collapsible" data-collapsed="true"> 
           <h3>Address</h3> 
           <p id="address_container"> 
           Some hidden content here 
           </p> 
          </div> 

          <div data-role="collapsible" data-collapsed="true"> 
           <h3>About Us</h3> 
           <p id="descriptions_container"> 
           Some more hidden content here 
           </p> 
          </div> 
          <div data-role="collapsible" data-collapsed="true"> 
           <h3>About Us</h3> 
           <p id="descriptions_container"> 
           Some more hidden content here 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> <!-- /container --> 
</body> 
</html>

来源

2013-10-15 user2881803

+0

这就是CSS文件很多值得载入中... –

回答

0

我假设你想在另一组内创建一组新的可折叠面板。 嗯，我已经尝试过了，它的工作原理应该如此。

<div data-role="collapsible" data-collapsed="true"> 
<h3>About Us</h3> 
<p id="descriptions_container"> 
Some more hidden content here 
</p> 
<div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" class="ui-collapsible-set ui-corner-all"> 
    <div data-role="collapsible" data-collapsed="true"> 
     <h3>Address</h3> 
     <p id="address_container"> 
     Some hidden content here 
     </p> 
    </div> 

    <div data-role="collapsible" data-collapsed="true"> 
     <h3>About Us</h3> 
     <p id="descriptions_container"> 
     Some more hidden content here 
     </p> 
    </div> 
    <div data-role="collapsible" data-collapsed="true"> 
     <h3>About Us</h3> 
     <p id="descriptions_container"> 
     Some more hidden content here 
     </p> 
    </div>

来源

2013-10-15 09:15:40 MentalRay

0

下面是代码，

<!DOCTYPE html> 


<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Creator</title> 
     <link rel="stylesheet" href="creator.css"> 
     <script type="text/javascript" src="jquery-2.0.1.js"></script> 

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
     <style> 
      html, body { padding: 0; margin: 0; } 
      html, .ui-mobile, .ui-mobile body { 
       height: 235px; 
      } 
      .ui-mobile, .ui-mobile .ui-page { 
       min-height: 235px; 
      } 
      .ui-content{ 
       padding:10px 15px 0px 15px; 
      } 
     </style> 
     <style> 
      body { padding-top: 60px; } 
      table { width: 100%; } 
      td, th {text-align: left; white-space: nowrap;} 
      td.numeric, th.numeric { text-align: right; } 
      h2, h3 {margin-top: 1em;} 
      section {padding-top: 40px;} 
     </style> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
     <link rel="stylesheet" href="css/bootstrap-responsive.css"> 


    </head> 



    <body> 
     <div class='rounded-corners1 col-md-6 col-md-offset-3' style="margin:20px 5px 5px 5px;background-color:#4BACC6;border:3px solid #357D91;text-align:center;color:white; "> 
      <div style="margin:30px;"> 
       <div data-role="page" style="max-height: 240px; min-height: 238px;" tabindex="0" class="ui-page ui-body-c ui-page-active"> 
        <div data-role="content" class="ui-content" role="main"> 

         <div class="container"> 
          <div class="row-fluid"> 
           <div class="span12" > 
            <center><h2>Interface</h2></center> 
           </div> 
          </div> 
         </div> 
         <div style="border:3px solid #C0504D;" class="rounded-corners1"> 
          <div class="container" style="margin-top:10px;"> 
           <div class="row"> 
            <div class="span2"><p></p></div> 
            <div class="span8 rounded-corners text-center" style="color:white;background-color:#4F81BD;border:3px solid #1D3C8B;"> 
             <h2>Creation Interface</h2> 
            </div> 
            <div class="span2"><p></div> 
           </div> 
          </div> 
          <div class="container"> 
           <div class="row"> 
            <div class="span2 text-center" style="font-size:20px;"> Base SID: </div> 
            <div class='span2'><input disabled class='text-center rounded-corners'value="<?php echo $sid;?>" id="sid" style="background-color:#4F81BD;border:3px solid #1D3C8B;color:white;font-size:18px;"></div> 
            <div class="span2"></div> 
            <div class="span2 text-center" style="font-size:20px;"> Output File: </div> 
            <div class='span2'><input disabled class='text-center rounded-corners'value=" " id="output" style="background-color:#4F81BD;border:3px solid #1D3C8B;color:white;font-size:18px;"></div> 
           </div> 
          </div> 
          <div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" class="ui-collapsible-set ui-corner-all"> 
           <div data-role="collapsible" data-collapsed="true"> 
            <h3>Address</h3> 
            <p id="address_container"> 
             Some hidden content here 
            </p> 
           </div> 

           <div data-role="collapsible" data-collapsed="true"> 
            <h3>About Us</h3> 
            <p id="descriptions_container"> 
             Some more hidden content here 
            </p> 
           </div> 
           <div data-role="collapsible" data-collapsed="true"> 
            <h3>About Us</h3> 
            <p id="descriptions_container"> 
             Some more hidden content here 
            </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> <!-- /container --> 
    </body> 
</html>

你的其他div S为内容div

来源

2013-10-15 09:23:13

0 
Add all yuor content insde 
<div data-role="content" class="ui-content" role="main"> </div> 
**e.g.** 
<!DOCTYPE html>

造物主 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
<style> 
html, body { padding: 0; margin: 0; } 
    html, .ui-mobile, .ui-mobile body { 
    height: 235px; 
} 
.ui-mobile, .ui-mobile .ui-page { 
    min-height: 235px; 
} 
.ui-content{ 
    padding:10px 15px 0px 15px; 
} 
</style> 
<style> 
    body { padding-top: 60px; } 
    table { width: 100%; } 
    td, th {text-align: left; white-space: nowrap;} 
    td.numeric, th.numeric { text-align: right; } 
    h2, h3 {margin-top: 1em;} 
    section {padding-top: 40px;} 
</style> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.css"> 


</head> 



<body> 
<div class="container"> 
    <div class="row-fluid"> 
     <div class="span12" > 
      <center><h2>Interface</h2></center> 
     </div> 
    </div> 
</div> 
<div style="border:3px solid #C0504D;" class="rounded-corners1"> 

    <div class='rounded-corners1 col-md-6 col-md-offset-3' style="margin:20px 5px 5px 5px;background-color:#4BACC6;border:3px solid #357D91;text-align:center;color:white; "> 
     <div style="margin:30px;"> 
      <div data-role="page" style="max-height: 240px; min-height: 238px;" tabindex="0" class="ui-page ui-body-c ui-page-active"> 
       <div data-role="content" class="ui-content" role="main"> 
        <div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" class="ui-collapsible-set ui-corner-all"> 
         <div data-role="collapsible" data-collapsed="true"> 
          <h3>Address</h3> 
          <p id="address_container"> 
          Some hidden content here 
          </p> 
         </div> 

         <div data-role="collapsible" data-collapsed="true"> 
          <h3>About Us</h3> 
          <p id="descriptions_container"> 
          Some more hidden content here 
          </p> 
         </div> 
         <div data-role="collapsible" data-collapsed="true"> 
          <h3>About Us</h3> 
          <p id="descriptions_container"> 
          Some more hidden content here 
          </p> 
         </div> 
        </div> 
        <div class="container" style="margin-top:10px;"> 
         <div class="row"> 
          <div class="span2"><p></p></div> 
          <div class="span8 rounded-corners text-center" style="color:white;background-color:#4F81BD;border:3px solid #1D3C8B;"> 
           <h2>Creation Interface</h2> 
          </div> 
          <div class="span2"><p></div> 
         </div> 
        </div> 
        <div class="container"> 
         <div class="row"> 
          <div class="span2 text-center" style="font-size:20px;"> Base SID: </div> 
          <div class='span2'><input disabled class='text-center rounded-corners'value="<?php echo $sid;?>" id="sid" style="background-color:#4F81BD;border:3px solid #1D3C8B;color:white;font-size:18px;"></div> 
          <div class="span2"></div> 
          <div class="span2 text-center" style="font-size:20px;"> Output File: </div> 
          <div class='span2'><input disabled class='text-center rounded-corners'value=" " id="output" style="background-color:#4F81BD;border:3px solid #1D3C8B;color:white;font-size:18px;"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> <!-- /container --> 
</body> 
</html>

来源

2013-10-15 09:38:30 Ved

相关问题

 相关问题