jquery - 溢出 : hidden messing up nav-tabs

Question

我有一个 bootstrap 4 导航选项卡栏，我将其分为“主选项卡”和“子选项卡”，它们使用 jquery 的 animate() 从主选项卡中滑出。见下面的代码:

CSS:

.nav-tabs .nav-item.main-item{
    border-radius: 0px;
    background: white;
}
.nav-tabs .nav-item.sub-item {
    background: rgba(240,240,240,1);
    margin-left: -5px;
}

HTML:

<ul class="nav nav-tabs">
    <li class="nav-item main-item"><a class="nav-link active" data-toggle="tab" href="#main1"><b>Main 1</b></a></li>
    <li class="nav-item main-item"><a class="nav-link" data-toggle="tab" href="#main2"><b>Main 2</b></a></li>
    <li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub1">Sub 1</a></li>
    <li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub2">Sub 2</a></li>
    <li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub3">Sub 3</a></li>
    <li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub4">Sub 4</a></li>
    <li class="nav-item sub-item" main="#main1"><a class="nav-link" data-toggle="tab" href="#sub5">Sub 5</a></li>
    <li class="nav-item main-item"><a class="nav-link" data-toggle="tab" href="#Main 3"><b>Plan</b></a></li>
    <li class="nav-item main-item"><a class="nav-link" data-toggle="tab" href="#Main 4"><b>Simulate</b></a></li>
</ul>

JS: (jQuery)

$(".nav-tabs .nav-item.main-item").click(function (){
    var hr = $(this).find(".nav-link").attr("href");
    $(".nav-tabs .nav-item.sub-item:not([main="+hr+"])").stop().animate({width: 'hide'});
    $(".nav-tabs .nav-item.sub-item[main="+hr+"]").stop().animate({width: 'show'});
});

虽然它在技术上确实有效，但在动画期间，由于我已经确定是 jQuery 为动画设置的“溢出:隐藏”，栏会变得困惑。见下图:

展开: Nav-tabs sub items fully expanded

动画期间: Nav-tabs sub items during animation

所以基本上它看起来像 overflow: hidden 添加了某种隐藏边距，将其他元素(主选项卡)向下推。关于 overflow: hidden all 的其他问题通过移除边距和设置元素以显示来解决:inline-block；但在我的例子中，已经没有边距了，所有的东西都已经有了内联 block 。 我试过将子部分嵌套在另一个 div 中。我还尝试在整个导航中用 div 替换所有 ul 和 li 元素，并尝试使用大量的 css 属性等等......但一切都以相同的结果结束。

我已经花了几天时间试图解决这个问题，但没有结果，所以我希望有人能帮助我。

编辑: 人们建议将 overflow:hidden in css 添加到子选项卡，但它也会导致展开状态困惑。样本: Messed up expanded state

Answer 1

更新

新的 JS -

$(function() {
    function hidemenus() {
    var hr = $("ul.nav-tabs>li.main-item > a.active").attr("href");
    hr = hr.replace(/#/, "");
    $(".nav-tabs .nav-item.sub-item[main=" + hr + "]").stop().animate({
       width: 'show'
    });
    $(".nav-tabs .nav-item.sub-item:not([main=" + hr + "])").stop().animate({
       width: 'hide'
    });

    }

    hidemenus();

    $(".nav-tabs > .nav-item.main-item > .nav-link").click(function(event) {

      event.preventDefault();
      $(".nav-tabs > .nav-item.main-item > .nav-link").removeClass('active');
      $(this).addClass('active');

      hidemenus();

    });

});

查看最新JSFiddle