Question

我正在努力解决一些HTML5问题。我有一个页面，我想在顶部放一个表格，然后是一个标签页....我正在尝试做一个有三个折叠的部分列后跟选项卡....我希望折叠部分扩展以占用所需的空间....我所看到的是标签页不会超出设定数量...

所以这里是我想要做的概述：

折叠部分
col1 col2 col3
xxxxx yyyyyy zzzz
xxxxx yyyyyy zzzz
/折叠部分
```
    tab1 ,  tab2, tab3 .....
```

以下是一些显示问题的示例代码....我注意到这种情况发生在各种各样的标签上......对于我的“真实”页面，我使用的是完全不同的css等...但是这个示例代码显示了同样的问题......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--DVID=00014EAC-->
<HTML>
 <head>

 <title>Tabs in HTML with CSS</title>
 <style type="text/css">
 <!--
#tabs {
    border-bottom: .5em solid #0033CC;
    margin: 0;
    padding: 0;
}
#tabs li {
     display:inline;
     border-top: .1em solid #03c;
    border-left: .1em solid #03c;
    border-right: .1em solid #03c;
 }
#tabs li a {
      text-decoration: none;
    padding: 0.25em 1em;
    color: #000;
}
#page1 #tabs li#tab1 a, #page2 #tabs li#tab2 a, #page3 #tabs li#tab3 a, .page4  li#tab4 a {
    padding: 0.25em 1em;
    background-color: #03c;
    color: #fff;
}
  -->

.ScanVINTextBoxStyle3 { width: 180px; }
.divTable     { width: 35%; height:  10%; display: table; }
.divTableRow  { width: 100%; height: 100%; display: table-row;}
.divTableCell { width: 25%;  height: 100%; display: table-cell;}


.cols { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol, .ctcol         { float:left; }
.rtcol                 { float:right; }

.layer1
 {
 margin: 0;
 padding: 0;
 width: 500px;
 }

.heading
{
 margin: 1px;
 color: #fff;
 padding: 3px 10px;
 cursor: pointer;
 position: relative;
 background-color:#c30;
}

.content
{
 padding: 5px 10px;
 background-color:#fafafa;
}

p
{
 padding: 5px 0;
}
 </style>
 <script type="text/javascript">
 jQuery(document).ready(function () {
     jQuery(".content").hide();
     //toggle the componenet with class msg_body
     jQuery(".heading").click(function () {
         jQuery(this).next(".content").slideToggle(500);
     });
 });
</script>
</head>

<body id="page2">

    <form>
     <div class="divTable">
            <div class="divTableRow">
                <div class="divTableCell"><label>VIN</label> </div>
                <div class="divTableCell"> <text></text> </div>
                 <div class="divTableCell"> <input type="submit"  value="Display"  />  </div>
            </div>
        </div>


        <div class="layer1">
                <p class="heading">Data</p>
                <div class="content">
                    <div class="cols">
                        <div class="ltcol">
                                <div class="divTable">
                                    <div class="divTableRow">
                                         <div class="divTableCell"> <label>Voyage</label> </div>
                                         <div class="divTableCell"> <label>xxxx</label>  </div>
                                    </div>
                                    <div class="divTableRow">
                                         <div class="divTableCell"> <label>Vessel</label> </div>
                                         <div class="divTableCell"> <label>xxxx</label>  </div>
                                         <div class="divTableCell"> <label>yyyy</label>  </div>
                                    </div>
                                    <div class="divTableRow">
                                         <div class="divTableCell"> <label>Vessel</label> </div>
                                         <div class="divTableCell"> <label>xxxx</label>  </div>
                                         <div class="divTableCell"> <label>yyyy</label>  </div>
                                    </div>
                                                   <div class="divTableRow">
                                         <div class="divTableCell"> <label>Vessel</label> </div>
                                         <div class="divTableCell"> <label>xxxx</label>  </div>
                                         <div class="divTableCell"> <label>yyyy</label>  </div>
                                    </div>
                                                   <div class="divTableRow">
                                         <div class="divTableCell"> <label>Vessel</label> </div>
                                         <div class="divTableCell"> <label>xxxx</label>  </div>
                                         <div class="divTableCell"> <label>yyyy</label>  </div>
                                    </div>
                               </div>
                        </div>
                        <div class="ctcol">
                                center
                        </div>
                        <div class="rtcol">
                            right
                        </div>
                    </div>
                </div>
            </div>
    </form>



<ul id="tabs">
<li id="tab1"><a href="ztab1.htm">Tab 1</a></li>
<li id="tab2"><a href="ztab2.htm">Tab 2</a></li>
<li id="tab3"><a href="ztab3.htm">Tab 3</a></li>
<li id="tab4"><a href="ztab4.htm">Tab 4</a></li>
</ul>
<p>The only difference in the HTML code between this page and the other three tabbed pages is that this page has an id on the body tag that names it "page2".</p>
<p><a href="/od/layout/a/aa042307.htm">Return to the Tabbed Navigation Article</a> </p>
</body>
</html>

Answer 1

这是slideToggle的问题，你不能slideToggle auto的高度。它不在其功能范围内。

因此，您必须像找到in this SO post

那样使用解决方法

我使用第一种方法来解决您的问题。 Here's a working jsFiddle

更新了jQuery

jQuery(document).ready(function () {
     jQuery(".content").hide();
     //toggle the componenet with class msg_body
     jQuery(".heading").click(function () {
         $(this).next(".content").animate({
           height: '300px' // some arbitrary height approaching target height
        }, { duration: 700 /* longer than the next animation */, queue: false });
         jQuery(this).next(".content").slideToggle({
             duration: 500,
             queue: false,
             complete: function () {
                 var divAheight = $('.content').height();
                 // stop the animation and begin another with the correct target height
                 $(this).stop().animate({ height: divAheight }, "slow");
             }
         });
     });
 });

html5标签页不调整页面

1 个答案: