Question

我是移动jQuery和HTML的新手，我正在尝试将一个可折叠集插入另一个div。

但我无法理解为什么父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>

Answer 1

我假设您要在另一组内创建一组新的可折叠面板。好吧，我已经尝试过了，它应该可行。

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

Answer 2

这是代码，

<!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内容不在div

Answer 3

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>

为什么这部分html不可见？

3 个答案: