单击并悬停碰撞

Question

我正在使用Bootstrap并且使用jQuery时遇到问题。我在标题处有一个导航栏，我希望当鼠标在链接上浏览时以及点击glyphicon-plus时，每个链接都会获得不同的颜色。它运行良好，直到我单击glyphicon并再次单击它。从那时起，悬停功能再次对glyphicon起作用。

我该如何解决？

var toggleState = true;
$('.dropdown-toggle').on("click", function() {
  if (toggleState) {
    $(this).css("background-color", "#395ECC");
    $(this).css("border-radius", "5px");
  } else {
    $(this).css("background-color", "#4775FF");
    $(this).css("border-radius", "0px");
  }
  toggleState = !toggleState;
});

$(".navbar li").hover(function() {
  $(this).css("background-color", "#395ECC");
  $(this).css("border-radius", "5px");
}, function() {
  $(this).css("background-color", "#4775FF");
  $(this).css("border-radius", "0px");
});

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.php" title="Home">
                <span class="glyphicon glyphicon-home"></span> 
            </a>
          </div> 
          <ul class="nav navbar-nav">
            <li><a href="#"><b>Link</b></a></li>
            <li><a href="#"><b>Link</b></a></li>
            <li><a href="#"><b>Link</b></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-plus"><b class="caret"></b></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><div class="divider"></div></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
              </ul>
            </li>
          </ul>
          
        </nav>

Answer 1

我强烈建议您使用LESS，或者至少使用http://getbootstrap.com/customize/生成一个具有所需颜色的自定义CSS。主要原因是以下5行代码更改：

导致CSS的这种差异：

  .navbar-default {
    background-color: #4775ff;
    border-color: #265cff;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    background-color: #395ecc;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    border-radius: 5px
  }

您可以将其添加为自定义CSS，但其他非常简单的更改最终会在生成的CSS中产生巨大差异。如果您希望最终结果看起来不错，那么您需要考虑bootstrap提供的所有不同方案。例如，使用此代码段，很难看到新的背景颜色的默认字体颜色。

＆＃13;

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="index.php" title="Home">
      <span class="glyphicon glyphicon-home"></span> 
    </a>
  </div>
  <ul class="nav navbar-nav">
    <li><a href="#"><b>Link</b></a>
    </li>
    <li><a href="#"><b>Link</b></a>
    </li>
    <li><a href="#"><b>Link</b></a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-plus"><b class="caret"></b></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li>
          <div class="divider"></div>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
      </ul>
    </li>
  </ul>

</nav>
<style>
  .navbar-default {
    background-color: #4775ff;
    border-color: #265cff;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    background-color: #395ecc;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    border-radius: 5px
  }
</style>

＆＃13;

＆＃13;

＆＃13;