1

私はいくつかの HTML5 に苦労しています。上部にフォームを配置し、その後にタブ付きのページを配置したいページがあります.... 3 つの列の後にタブが続く折りたたみセクションを作成しようとしています....折りたたみセクションが必要です必要なだけのスペースを占めるように拡張するには....私が見ているのは、タブページが設定された量を超えて下に移動しないことです...

だからここに私がやろうとしていることの概要があります：

  • 崩壊部
  • 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できません。それはその機能の範囲内ではありません。slideToggleauto

その結果、この 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 に答える