手风琴在页面上需要有一个盒子保持打开而不能折叠(Accordion on page needs to have one of the boxes stay open and not be collap

手风琴在页面上需要有一个盒子保持打开而不能折叠(Accordion on page needs to have one of the boxes stay open and not be collapsable)

我在页面顶部有3个标签，然后每个标签都有一个手风琴。

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

这是代码

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title>  <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>   <style type="text/css"> body { background-color: #000000; } </style>  </head> <body> <div class="wrapper"><div class="one_half"> <div class="one_half last">  <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>   <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>

I have 3 tabs at the top of the page, and then an accordion in each one.

I need my bottom option in the accordion to always stay open at a fixed height of 200 pixels. I'm thinking I can take it out of the accordion and just set a default height, however I need it to switch within the tabbed system as well. Any ideas?

Here is the code

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title>  <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>   <style type="text/css"> body { background-color: #000000; } </style>  </head> <body> <div class="wrapper"><div class="one_half"> <div class="one_half last">  <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>   <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>

最满意答案

我想如果你坚持使用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; }

I guess if you're sticking with jQuery UI, you could make it it's own non-collapsible accordion, click here to take a look (Note edited from my original answer to address your 200px height issue):

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

And the 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" }); });

And finally the CSS:

.height_control:last-child { height: 200px; }

更多推荐