温馨提示:本文翻译自stackoverflow.com,查看原文请点击:jquery - Bootstrap dropdown icon on navbar glitch while navigating pages

jquery - 浏览页面时导航栏故障上的Bootstrap下拉图标

发布于 2020-03-27 15:56:26

我有这个导航栏下拉代码:

<li class="nav-item dropdown">
    <a href="javascript:void(0)" id="btn_login" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="en">Log In <i class="fas fa-chevron-down"></i></span>
        <span class="my">Log Masuk <i class="fas fa-chevron-down"></i></span>
    </a>
    <ul id="login_dropdown" class="dropdown-menu dropdown-primary dropdown-menu-right mt-2 shadow-lg animated bounceIn" aria-labelledby="btn_login">
        <li class="px-3 pt-3" style="width: 200px;">
            <!-- Form here -->
        </li>
    </ul>
</li>

我使用了这个jquery来更改下拉图标:

$(".dropdown").on("show.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-down").addClass("fa-chevron-up");
}).on("hide.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});

看看我制作的这张屏幕截图(忽略开关,稍后将修复此问题,将重点放在人字形图标上):Glitching Navbar

如您所见,页面加载似乎不存在该图标,从而使导航链接稍微向右移动,但是当该图标出现时,导航链接将移至正确的位置。

旁注:

  • 似乎该图标加载在每个页面上。
  • 我目前使用HTML因此,我在每个页面上粘贴了相同的导航栏,但是链接的活动状态不同。
  • 我没有考虑任何iframe或在所有页面上都包含相同的导航栏实例(尚未)。
  • 每次都会在基于CHROMIUM的浏览器中发生这种情况
  • 尽管最初看起来确实加载,但只有FIREFOX看起来不错,但随后没有问题。

查看更多

查看更多

提问者
Maut Repui
被浏览
11
Cerlin 2020-01-31 16:35

在图标上添加固定宽度应使导航栏停止跳跃

.fas {
    width: 20px
}

发布
问题

分享
好友

手机
浏览

扫码手机浏览