Question

我正在尝试根据div高度设置页面加载时ul的高度，该高度是第一个li项的子级。

最终会有多组选项卡，因此我需要遍历每组选项卡的所有实例，并根据其内容定义高度。它们的高度都不同，具体取决于其中的内容。

JS

$('ul.tabs li').nextUntil(':eq(1)').each(function() {
   var $this = $(this);
   var tabContainer = $this.parents('ul.tabs').eq(0);
   tabContainer.height($this.children('.tab-content').outerHeight());
});

HTML

<ul class="tabs list fa-ul ml2 pl0 tf w-100 h-auto db relative">

            <li class="lh-copy pv2 active" data-tab="tab-21">
              <a class="link pointer blue hover-teal no-underline d tab-hover-fix tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Link Item</a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt2 pb2 pl5-ns dn db absolute-ns top-0 right-0">
                  CONTENT GOES HERE
                  <br>
                  CONTENT GOES HERE
              </div>

            </li>
            <li class="lh-copy pv2" data-tab="tab-22">
              <a class="link pointer blue hover-teal no-underline d tab-hover-fix tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Link Item</a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt2 pb2 pl5-ns dn db absolute-ns top-0 right-0">
                  CONTENT GOES HERE
              </div>

            </li>
<ul>

使用第一个列表项的子级Div设置页面加载时无序列表的高度

0 个答案: