标签内的jquery ui手风琴

问题描述：

我碰到使用标签内手风琴的问题，最初不活动的手风琴不正确地选择了他们的标签时呈现其内容. 到处阅读，我看到的原因是非活动选项卡最初没有显示:因此手风琴内的div高度无法正确计算.没有建议的解决方案对我有用. 有没有人克服或解决这个问题?

I’ve run into a problem using accordions within tabs, the initially inactive accordions do not render their content correctly when their tab is selected. Reading around I see the reason for this is that the inactive tabs have display:none initially, so the height of the divs within the accordion do not get calculated correctly. None of the suggested solutions work for me. Have has anyone overcome this or have a work around?

以下是该问题的一些示例代码:

Here's some example code of the problem:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
  <script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
  <script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script> 

  <script type="text/javascript">
  $(document).ready(function(){
    $('#tabs').tabs();
    $("#accordion1").accordion();
    $("#accordion2").accordion(); 
  });
  </script>
</head>
<body style="font-size:62.5%;">
   <div id="main" class="round roundB">

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a> </li>      
    <li><a href="#tab2">Tab 2</a> </li>
  </ul>

<div id="tab1">
  <div id="accordion1">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  TAB 1 Accordion 1
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  TAB 1 Accordion 2
  </p>
 </div>
  </div>
</div>

<div id="tab2">
  <div id="accordion2">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  TAB 2 Accordion 1
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  TAB 2 Accordion 2
  </p>
 </div>
  </div>
</div>
</div>

</div>
</body>
</html>

答

我之前遇到过同样的问题. 解决方法是:您必须在选项卡之前激活手风琴.

I had the same problem before. The solution is: You must active accordion before tabs.

$("#accordion").accordion();
$("#tabs").tabs();

也许您需要左对齐.

.ui-accordion-header{
  text-align: left;
}

祝你好运

相关推荐