0

我在页面顶部有 3 个选项卡，然后每个选项卡都有一个手风琴。

我需要我在手风琴中的底部选项始终保持在 200 像素的固定高度打开。我想我可以将它从手风琴中取出并设置一个默认高度，但是我也需要它在选项卡式系统中进行切换。有任何想法吗？

这是代码

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>test page</title>

    <!-- Website Styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/skins/dark.css" type="text/css" media="screen">    
    <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen">
    <script src="js/jquery-1.9.1.js"></script>





    <!-- Scripts Styles -->


     <!-- Custom StyleSwitcher stylesheet -->
    <style type="text/css">
    body {
    background-color: #000000;
}
    </style>

    <!--[if IE 7]>
    <link rel="stylesheet" media="screen" href="css/ie7.css"/>
    <![endif]-->

</head>

<body>

<div class="wrapper"><div class="one_half">

<div class="one_half last">
   <!-- Accordion -->



<div id="tabs">
    <ul>
        <li class="sizes">Size ></li>    
        <li >A</a></li>
        <li >B</a></li>
        <li >C</a></li>
    </ul>
    <div id="tabs-1">
<div id="accordion1">
    <h3 class="tab_first">A</h3>
    <div>Content </div>
    <h3>B</h3>
    <div>Content </div>

</div>
    <h3>C</h3>
    <div>Content that needs to stay open to 200 pixels </div>
    </div>
</div>
    <div id="tabs-2"><div id="accordion2">
    <h3>First</h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h3>Second</h3>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h3>Third</h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div></div>
    <div id="tabs-3">Content that always needs to stay open to 200 pixels</div>
</div>


</div></div>



        <!-- FOOTER END -->   
        <!-- jQuery Scripts -->

    <script src="js/jquery-ui-1.10.3.custom.js"></script>
    <script>$(function() {
        $( "#accordion1, #accordion2, #accordion3" ).accordion({active: 1 });
        autoheight: false 
        collapsible: false
        heightStyle: "fill"
        minHeight: 550,


        $( "#tabs" ).tabs();
        });</script>


<script type="text/javascript" src="js/contact-form.js"></script>
<script type="text/javascript" src="js/custom.js"></script>  


</body> 
</html>
4

1 回答 1

0

我想如果你坚持使用 jQuery UI，你可以让它成为自己的不可折叠手风琴，单击此处查看（注释从我的原始答案编辑以解决你的 200px 高度问题）：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1</a>
        </li>
        <li><a href="#tabs-2">2</a>
        </li>
        <li><a href="#tabs-3">3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <div class="accordion">
            <div class="height_control">
                <div class="sub_accordion">
                    <h3>Heading1</h3>
                    <p>The content of heading1</p>
                    <h3>Heading2</h3>
                    <p>The content of heading2</p>
                </div>
            </div>
            <div class="height_control">
                <div class="sub_accordion">
                    <h3>Always open Heading</h3>
                    <p>This content must always be open</p>
                </div>
            </div>
        </div>
    </div>
    <div id="tabs-2">
        <div class="accordion">
            <div class="height_control">
                <div class="sub_accordion">
                    <h3>Heading1</h3>
                    <p>The content of heading1</p>
                    <h3>Heading2</h3>
                    <p>The content of heading2</p>
                </div>
            </div>
            <div class="height_control">
                <div class="sub_accordion">
                    <h3>Always open Heading</h3>
                    <p>This content must always be open</p>
                </div>
            </div>
        </div>
    </div>
    <div id="tabs-3">
         <div class="accordion">
            <div class="height_control">
                <div class="sub_accordion">
                    <h3>Heading1</h3>
                    <p>The content of heading1</p>
                    <h3>Heading2</h3>
                    <p>The content of heading2</p>
                </div>
            </div>
            <div class="height_control">
                <div class="sub_accordion">
                    <h3>Always open Heading</h3>
                    <p>This content must always be open</p>
                </div>
            </div>
        </div>
    </div>
</div>

和 JS：

 $(function () {
     $("#tabs").tabs({
         heightStyle: "content"
     });
      $( ".height_control:not(:last-child) .sub_accordion").accordion({
         collapsible: true,
          heightStyle: "content"
      });
     $( ".height_control:last-child .sub_accordion" ).accordion({
         collapsible: false,
         heightStyle: "fill"
     });
 });

最后是 CSS：

.height_control:last-child {
    height: 200px;    
}
于 2013-08-27T18:28:11.203 回答