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

所以基本上看起来像是溢出：隐藏添加了某种隐藏边距，将其他元素（主选项卡）向下推。有关溢出的其他问题：全部隐藏都可以通过删除边距和将元素设置为显示来解决：inline-block;但是在我的情况下，已经没有边距，并且所有内容都已内联。我试过将子部分嵌套在另一个div中。我还尝试过在整个导航中用div替换所有ul和li元素，并使用大量的css属性，依此类推...但是最终结果都相同。

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

编辑：人们建议在子选项卡中添加“ css中隐藏的overflow：”，但这也会导致扩展状态混乱。样品： 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

Answer 2

请尝试

.nav-tabs .nav-item.sub-item {
    background: rgba(240,240,240,1);
    margin-left: -5px;
     overflow: hidden;
    white-space: nowrap;
}

溢出：隐藏混乱的导航标签

2 个答案: