如何使 .icon-bar 和 .navbar-toggle 边框在活动时更改颜色？答案

【问题标题】：How to make .icon-bar and .navbar-toggle's border change color when active?如何使 .icon-bar 和 .navbar-toggle 边框在活动时更改颜色？
【发布时间】：2015-09-20 16:49:01
【问题描述】：

当我的导航栏折叠时，我希望汉堡/折叠菜单在单击/激活时改变颜色。就像在 Youtube 上一样，菜单在活动时变为红色https://www.youtube.com

我尝试在这里和那里编写一些东西并进行研究，但没有什么真正适合我。我只设法让我的 .navbar-toggle 在活动时更改颜色，但这不是我需要的。

HTML

<!DOCTYPE html>   
<html lang="en">

<head>
    <title>KLF | Forside</title>

    <?php include "top-app.php"?>
</head>


<body>

<div class="row hidden-xs">    
    <div class="navbar-fixed-top">   
        <div class="navbar">
            <ul>
                <li><a class="active" href="index.php">NYHEDER</a></li>
                <li><a href="holdet.php">HOLDET</a></li>
                <li><a href="kampe.php">KAMPE</a></li>
            </ul>   
            <a href="index.php"><img src="images/klf_logo.png" class="logo-knap"></a>  
            <ul>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a href="kontakt.php">KONTAKT</a></li>
            </ul>
        </div>
    </div>
</div>    

<div class="visible-xs">    
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.php"><img style="margin-right: -56px;" src="images/klf_logo.png"></a> 
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
            <ul>
                    <li><a class="active" href="index.php">NYHEDER</a></li>
                    <li><a href="holdet.php">HOLDET</a></li>
                    <li><a href="kampe.php">KAMPE</a></li>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a href="kontakt.php">KONTAKT</a></li>
            </ul>

  </div>
  </div>
</div>      
</div>    

    <div class="hej" style="height:3000px;"></div>

    <div class="container"></div>

    <?php include 'bot-app.php'?>

</body>

</html>

CSS

    body {
    background-color: #FFFFFF;
    margin: 0;
    font-family: "open sans"
}



/* MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV */
.navbar {
    border: 1px solid transparent;
    height: 91px;
    margin: auto;
    z-index: 1000;
    box-shadow:  0px 1px 14px #A4ABB0;
    background-color: #FFFFFF;
    font-size: 15px;
    text-align: center;
}

.navbar ul {
    padding: 0;
    list-style-type: none;
    display: inline-block;
    margin: auto;
}

.navbar ul>li {
    float: left;
    display: inline;
}

.navbar ul>li>a {
    color: #A4ABB0;
    padding: 42px 29px 23px 29px;
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: bold;
    border-bottom: 5px solid #FFFFFF;
}

.navbar .active {
    color: #208AF0; 
    border-bottom: 5px solid #208AF0;
}

.navbar ul>li>a:hover {
    color: #208AF0;
    border-bottom: 5px solid #208AF0;
}

.navbar a>img {
    position: relative;
    display: inline-block;
}



/* MENU/NAV COLLAPSED */
.highlight {
    color: #208AF0;
}

.navbar-default .navbar-toggle {
  border-color: #A4ABB0;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #A4ABB0;
}

$(document).ready(function () {
    function CloseNav() {
        $(".navbar-collapse").stop().animate({'height': 0},300, function () {
            $('.navbar-collapse').removeClass('in').addClass("collapse");
        });
        $(".navbar-toggle").stop().removeClass('collapsed');
    }

$('html').click(function (event) {
    var clickover = $(event.target);
    var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {
         $('.navbar-toggle').toggleClass('highlight');
        CloseNav();
    }

});

$('.navbar-toggle').click(function() {
  $(this).toggleClass('highlight').blur();
});
});

如果您能提供帮助，那将意义重大:)！我试图给出边框和图标栏的活动颜色是#208AF0。

【问题讨论】：

还有更多问题。导航栏没有切换。

标签： jquery html css twitter-bootstrap navbar

【解决方案1】：

尝试将.navbar-toggle css 样式更新为：

.navbar-default .navbar-toggle.collapsed {
  border-color: #A4ABB0;
}

.navbar-default .navbar-toggle.collapsed .icon-bar {
  background-color: #A4ABB0;
}

.navbar-default .navbar-toggle{
 border-color:#208AF0 ;
}
    .navbar-default .navbar-toggle .icon-bar{
       background-color:#208AF0;
    }

看到这个fiddle。

【讨论】：

谢谢你:)！有用！不敢相信这显然是这么容易，在任何地方都找不到任何东西:)！
np。如果您没有将它用于其他任何事情，您也可以从您的 javascript 中删除 $('.navbar-toggle').toggleClass('highlight');。
@Haag 我注意到您正在通过调用CloseNav() 函数并使用animate 为菜单设置动画来关闭导航。您可以将其全部删除并使用Bootstrap collapse api 调用将其关闭。只需使用$(".navbar-collapse").collapse('hide'); 将其关闭。请参阅此 fiddle 中更新的 javascript。