如何自动调整标签的高度以适应内容

how do i automatically adjust the height of a tab to fit content

本文关键字：高度 何自动 调整 标签      更新时间：2023-09-26

当日历在选项卡中弹出时，我希望选项卡调整到其中内容的高度。这是我的代码。谢谢

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

当点击手风琴式选项卡中的输入部分时，会弹出一个日期选择器来选择日期。我希望选项卡根据内容高度进行调整，以适应日期选择器。关于如何完成这项工作有什么想法吗？提前感谢

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

这是一把正在工作的小提琴。然而，正如评论所说（亚当），如果内容不流畅，这将不起作用。

更新

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

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

这里有第一个选项的小提琴

另一种选择是在带有display:none的选项卡内创建一个与日期选择器大小大致相同的div，并在输入的焦点上显示/隐藏div。这个div将完全为空（因此当您"显示"它时不会显示任何内容），但它会给人一种选项卡正在"扩展"的印象。

这里有第二个选项的小提琴

另外，我建议使用focusin/focusout，因为我相信日期选择器在事件上出现/消失

更新2

第三次演示

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

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

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