Question

我有一个我想要着色的bootstrap Navbar。只有当点击导航栏上的按钮而不是悬停在按钮上时，才会显示下拉列表，因此它适用于移动用户。

现在它显示为白色，当按钮处于活动状态时，文本颜色会变黑。当它悬停在它上面时，会变成更深的蓝色，这是我希望它在活动时保持的蓝色。我尝试了许多其他示例，例如.active＆gt; a：焦点和.active＆gt; a：活跃，但都不起作用。

导航栏的html代码如下：

.click();

由于将其粘贴到我的网站上，缩进有点破碎。 CSS代码可以在JSFiddle中看到。 bootstrap.js，bootstrap.css和jquery-2.2.0.js将在页面的上方导入。

下面链接了一个有效的JSFiddle示例。要查看效果，您必须展开结果窗口，以便导航栏不会折叠。单击后，您还必须从其中一个下拉按钮中移除鼠标，使其变为白色。

这是JSFiddle链接：https://jsfiddle.net/hezejk88/9/

任何解决方案都非常感谢！

Answer 1

当下拉列表同时为.open 和 a元素时，会应用该样式：

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    background-color: #e7e7e7;
    color: #555;
}

您当前的覆盖不适合专注的风格，因此您只需将其添加到：

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus, /* <- This one was missing. */
.navbar-default .navbar-nav > .open > a:active {
  color: #ffffff;
  background-color: #084c78;
}

Amended JSFiddle demo。修复程序应用于第53行。

Answer 2

试试这个js。

<script>
$(document).ready(function () {
    var url = document.URL;
    $(".list-unstyled li").each(function () {
        var y = $(this).children("a").attr('href');
        var pieces = url.split('/');
        //var routeData= route.substring(0, route.indexOf('?'));
        var abc= pieces[pieces.length - 1].substring(0,pieces[pieces.length - 1].indexOf('?'));
        if(abc)
        {
            if (pieces[pieces.length - 1].substring(0,pieces[pieces.length - 1].indexOf('?')) == y) 
            {
                if ($(this).parents(".has-submenu").length == 1) 
                {
                    $(this).addClass("active");
                    $(this).parents(".has-submenu").addClass("active")
                }
                else 
                {
                    $(this).addClass("active");
                }
            }
        }
        else
        {
            if (pieces[pieces.length - 1] == y) 
            {
                if ($(this).parents(".has-submenu").length == 1) 
                {
                    $(this).addClass("active");
                    $(this).parents(".has-submenu").addClass("active")
                }
                else 
                {
                    $(this).addClass("active");
                }
            }
        }
    });

});
</script>

激活时，Bootstrap 3导航栏颜色下拉按钮

2 个答案: