时间戳

首页 > 解决方案 > 溢出：隐藏混乱的导航选项卡

jquery - 溢出：隐藏混乱的导航选项卡

问题描述

我有一个引导 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 为动画设置的“溢出：隐藏”，该栏会变得混乱。见下图：

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

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

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

我现在已经花了几天时间试图解决这个问题，所以我希望有人可以帮助我。

编辑：人们建议在子选项卡中添加溢出：隐藏在 css 中，但它也会导致扩展状态混乱。示例： 搞砸了展开状态

标签： jqueryhtmlcsstwitter-bootstrapbootstrap-4

解决方案

更新

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

推荐阅读