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

Question

我有一个引导程序4导航选项卡栏，我将其分为"主选项卡"one_answers"子选项卡"，它们用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为动画设置的"溢出：隐藏"，栏会变得一团糟。见下图：

扩展：导航选项卡子项完全展开

动画期间：动画期间的导航选项卡子项

所以基本上看起来像是溢出：隐藏添加了某种隐藏的边距，将其他元素(主选项卡(向下推。关于溢出的其他问题：隐藏所有通过删除边距和设置元素来显示：内联块；但在我的情况下，已经没有利润了，所有的东西都已经有了内联块。我尝试过在另一个div中嵌套子部分。我也尝试过在整个nav中用div替换所有ul和li元素，并使用大量css属性等等……但一切都以相同的结果结束。

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

编辑：人们建议在子选项卡中添加overflow：隐藏在css中，但它也会导致扩展状态混乱。样品：混乱的扩展状态

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