1

我正在为一些 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>
4

1 回答 1

0

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

结果，您必须使用类似于此 SO 帖子中的解决方法

我使用第一种方法来解决您的问题。这是一个工作的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");
             }
         });
     });
 });
于 2013-08-01T18:10:46.567 回答