选项卡中的jquery ui手风琴答案

【问题标题】：jquery ui accordions within tabs选项卡中的jquery ui手风琴
【发布时间】：2010-12-05 06:10:29
【问题描述】：

我在标签中使用手风琴时遇到了问题，最初不活动的手风琴在选择标签时无法正确呈现其内容。阅读周围我发现原因是非活动选项卡最初具有 display:none，因此手风琴内 div 的高度没有得到正确计算。建议的解决方案都不适合我。有没有人克服这个问题或有解决方法？

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

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

【问题讨论】：

标签： jquery-ui jquery-ui-tabs

【解决方案1】：

我之前也遇到过同样的问题。解决方案是：您必须在制表符之前激活手风琴。

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

也许你需要左对齐。

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

祝你好运

【讨论】：

谢谢，比我想出的解决方案简单多了！
非常感谢！！！我在尝试解决这个问题时遇到了很多麻烦，以至于我没有意识到解决方案可以这么简单。再次感谢。
工作就像一个魅力。很好的解决方案。
上帝保佑你！哈哈。这为我节省了很多时间。

【解决方案2】：

在阅读了所述问题后，我的印象是我遇到的问题具有相似的性质。在选项卡中使用手风琴功能迫使我的手风琴内容包含滚动条，这是我不想要的功能。

由于某种原因，当前提供的解决方案对我不起作用。

我找到的解决方案是覆盖autoHeight的默认手风琴设置（默认为true，覆盖为false）

$("#accordion").accordion({
    autoHeight: false
});
$('#tabs').tabs();

【讨论】：

非常感谢。我整天都在扯头发试图解决这个问题。上面的“接受的答案”没有帮助 - 但这解决了它！
+1，如果出现小滚动条，此解决方案适合您。谢谢
2018年还在防止脱发！！

【解决方案3】：

激活选项卡时初始化手风琴：

样本：

$('.selector').bind('tabsadd', function(event, ui) {
  ...
});

你的样本：

  <script type="text/javascript">
    $(document).ready(function(){
        $('#tabs').tabs();
    $('#tabs').bind('tabshow', function(event, ui) {
        $("#accordion1").accordion();
        $("#accordion2").accordion(); 
    });

  });
  </script>

也许您需要为每个选项卡初始化每个手风琴。

或使用最新的 UI 库：

    <link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

【讨论】：

【解决方案4】：

    $( "#tabs" ).tabs({
        load: function(event, ui) {
            $("#"+ui.panel.id+" .accordians:first").accordion();
        }
    });

这在使用带有标签的 ajax html 时有效。

【讨论】：

【解决方案5】：

以上都不适合我。对我来说，诀窍是将每个手风琴使用唯一的 div ID 更改为所有手风琴的单一类别标识。也就是说，在每个选项卡中将：<div id="accordion1>, <div id="accordion2>,etc... 更改为<div class="accordion">。

您可能还需要添加到您的 $(document).ready 函数中

$(".accordion").accordion({
      autoHeight: false
  });

  $('#tabs').tabs();
  $('#tabs').bind('tabshow', function(event, ui) {
      $(".accordion").accordion("resize");
      });

所以格式是：

<!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()
  {
      $(".accordion").accordion({
            autoHeight: false
      });

      $('#tabs').tabs();
      $('#tabs').bind('tabshow', function(event, ui) {
          $(".accordion").accordion("resize");
      });
  });
  </script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">User</a></li>
        <li><a href="#tabs-2">Folders</a></li>
        <li><a href="#tabs-3">Decks</a></li>
    </ul>
    <div id="tabs-1">
        <div class='accordion'>
            <h3>Header 1</h3>
            <div</div>  
            <h3>Header 2</h3>
            <div></div> 
            <h3>Header 3</h3>
            <div><</div> 
        </div>
    </div>
    <div id="tabs-2">
        <div class='accordion'>
            <h3>Header 4</h3>
            <div</div>  
            <h3>Header 5</h3>
            <div></div> 
            <h3>Header 6</h3>
            <div><</div> 
        </div>
   </div>
   <div id="tabs-3">
        <div class='accordion'>
            <h3>Header 7</h3>
            <div</div>  
            <h3>Header 8</h3>
            <div></div> 
            <h3>Header 9</h3>
            <div><</div> 
        </div>  
   </div>
</div>

</body>
</html>

【讨论】：

【解决方案6】：

见

http://bugs.jqueryui.com/ticket/5601

.ui-helper-clearfix { display:block;最小宽度：0；溢出：隐藏； }

【讨论】：

【解决方案7】：

请仔细阅读http://docs.jquery.com/UI/Tabs# 有一个答案。这是最简单的方法

【讨论】：