如何自动调整选项卡的高度以适应内容

Question

我想标签调整到它的内容的高度时，日历弹出的标签。这是我的代码。谢谢!

  <script>
  $(function(){
  $( "#accordion-1" ).accordion({collapsible: true,
  heightstyle: "content"});  

  $("#enable").click(function(){
  $("#accordion-1").accordion("option", "disabled", false);
  $("#accordion-1").accordion("option", "active", 2);
  });

  $("#disable").click(function(){
  $("#accordion-1").accordion("option", "disabled", true);
  });
  });

  $(function() {
  $( "#datepicker-1" ).datepicker();
  });
  $(function() {
  $( "#datepicker-2" ).datepicker();
   });

   </script>


   <div id="accordion-1" >
   <h3>Tab 1</h3>
    <div> 
    Departure City: <input id="dep"></input> 
    Arrival City: <input id="arr"></input>
    </div>
    <h3>Tab 2</h3>
    <div id="select_date" >     
    Onward Departure Date: <input id="datepicker-1"></input>
    Return Departure Date: <input id="datepicker-2"></input>
    </div>
    <h3>Tab 3</h3>
    <div>    
    Traveler 1: <input id="name1"></input>
    Traveler 2: <input id="name2"></input>
    </div>
   </div>

单击折叠样式选项卡中的输入部分时，将弹出一个日期选择器以选择日期。我希望标签调整到内容的高度，以适应日期选择器。有没有什么办法来解决这个问题？提前感谢

Answer 1

不确定您拥有什么，但是如果您不指定height css属性，那么它将始终是适合内容所需的大小

heres一个工作的小提琴。然而，正如评论所说(Adam)，如果内容不在流中，这将不起作用。

更新

从您提供的内容中，我可以看出问题出在哪里。我认为日期选择器有一个position:absolute，这意味着它不关心它在哪个div中，它将显示在顶部，而不会展开它的父级。

我的建议是在这些输入的focusin和focusout事件上手动扩展选项卡的高度，但这将迫使您为选项卡指定一个特定的高度。

为第一个选项heres一个小提琴

另一种选择是创建一个与选项卡内的日期选择器大小相同的display:none，在输入的焦点内/外，您可以显示/隐藏您的div。这个div是完全空的(所以当你“显示”它的时候什么也不会显示出来)，但是它会给人一种你的标签正在“扩展”的感觉。

heres为第二个选项拉小提琴

另外，我建议使用focusin/focusout，因为我认为日期选择器会在这些事件中出现/消失

更新2

Third DEMO

还有第三种方法可以做到这一点。我最近检查了一下日期选择器，它有一个唯一的id。由于日期选择器只出现在输入事件的焦点上，而在焦点输出时消失，所以理论上一次应该只有一个日期选择器(因此将保持唯一的id )。

您可以通过id获取日期选择器，并将其保存到一个变量中。然后删除最初出现的日期选择器，并将其附加到包装两个日期输入的div中。最后，您可以将其位置设置为static，这样它将自动调整div的高度。

var datepicker = $('#ui-datepicker-div');
$('#ui-datepicker-div').remove();
$('#select_date').append(datepicker);
$('#ui-datepicker-div').css('position', 'static');