Bootstrap Dropdown Make Dropdown箭头改变方向

Question

我正在寻找一种方法，使菜单关闭时，自动向下拉菜单箭头改变方向，当菜单打开时，向下改变方向。

这是我的HTML代码：

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <% if defined?(Devise) %>
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Login", new_user_session_path %></li>
          <li><%= link_to "Sign Up", new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

我认为在js中最容易做到。

这是我的jsfiddle代码：https://jsfiddle.net/Pabi/RxguB/75/

谢谢。

Answer 1

我刚遇到同样的问题。我希望在下拉列表处于活动状态时使插入符号图标向上查看，而在下拉列表处于活动状态时则查找正常（向下）图标。这是我的解决方案：

<style>
  .caretup {
    transform: rotate(180deg);
  }
</style>
<script>
  $(function(){
    $(".dropdown").on("show.bs.dropdown hide.bs.dropdown", function(){
      $(this).find(".caret").toggleClass("caretup");
    });
  });
</script>

那就是它！

Answer 2

试试这段代码。

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class='caret' id='menu-caret'></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><a href="/signout">Sign Out</a></li>
            </ul>
          </li>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

并添加脚本

<script>  
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeIn();
      $('#menu-caret').addClass('glyphicon glyphicon-chevron-up');
      $('#menu-caret').removeClass('caret');
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
      $('#menu-caret').addClass('caret');
      $('#menu-caret').removeClass('glyphicon glyphicon-chevron-up');
    }); 
</script>

删除你的CSS中的onhover css

参考这个小提琴http://jsfiddle.net/7o8sLhgf/

Answer 3

使用jQuery和一些小CSS的解决方案。

＆＃13;

＆＃13;

 $(function() {
   $(".dropdown").hover(

     function() {
       $('.dropdown-menu', this).stop(true, true).fadeIn("fast");
       $(this).toggleClass('open');
       $('span', this).toggleClass("caret caret-up");
     },

     function() {
       $('.dropdown-menu', this).stop(true, true).fadeOut("fast");
       $(this).toggleClass('open');
       $('span', this).toggleClass("caret caret-up");
     });
 });

＆＃13;

/*TODO Check what makes the hover items dark blue*/

.navbar {
  text-transform: uppercase;
  margin-bottom: 0px;
}
.navbar-inverse {
  padding-bottom: 70px;
  padding-top: 70px;
}
.navbar-inverse .navbar-nav > li > a {
  color: white;
}
.navbar-brand {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
}
.navbar-inverse .navbar-toggle {
  border-color: transparent;
}
.navbar-trans {
  background-color: #279ddd;
  color: #fff;
  border-bottom-width: 1px;
  border-color: #fff;
}
.navbar-trans li>a:hover,
.navbar-trans li>a:focus,
.navbar-trans li.active {
  background-color: #38afef;
}
.navbar-trans a {
  color: #fefefe;
}
/*Drop down menu styling*/

ul.dropdown-menu {
  background-color: #279ddd;
}
ul.dropdown-menu {
  background-color: #279ddd;
}
ul.dropdown-menu li a {
  color: white;
}
/*Dropdown on Hover*/

.sidebar-nav {
  padding: 9px 0;
}
.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}
.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
.caret-up {
  width: 0;
  height: 0;
  border-left: 4px solid rgba(0, 0, 0, 0);
  border-right: 4px solid rgba(0, 0, 0, 0);
  border-bottom: 4px solid;
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Project Pandora</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav"></ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <span class='caret' id='#menu-caret'></span></a>

          <ul class="dropdown-menu">
            <li> <a href="#">Do Something</a>

            </li>
            <li><a href="#">Do Something</a>

            </li>
            <li class="divider"></li>
            <li><a href="/signout">Sign Out</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- container-collapse -->
</nav>

＆＃13;

＆＃13;

＆＃13;