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

Question

当我的导航栏折叠时，我希望 burger-/collapsed-menu 在 clicked/active 时改变颜色。就像在 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;
}

JS

$(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。

Answer 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。

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

How to make .icon-bar and .navbar-toggle's border change color when active?

html

css

jquery

navbar

twitter-bootstrap