Javascript 引导下拉菜单使下拉箭头更改方向

我正在寻找一种方法，使引导下拉菜单箭头改变方向，从面向上时，菜单关闭和向下时，菜单打开

这是我的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中这是最容易做到的

以下是我的JSFIDLE代码：

谢谢。

试试这段代码

<!-- 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>

$（'ul.nav li.dropdown'）。悬停（函数（）{
$（this）.find（'.dropdown menu'）.stop（true，true）.delay（0）.fadeIn（）；
$（“#菜单插入符号”）.addClass（'Glyphion-Glyphion-chevron-up'）；
$（“#菜单插入符号”）.removeClass（'caret'）；
}，函数（）{
$（this）.find（'.dropdown menu'）.stop（true，true）.delay（0）.fadeOut（）；
$（“#菜单插入符号”）.addClass（“插入符号”）；
$（“#菜单插入符号”）.removeClass（'glyphicon-glyphicon-chevron-up'）；
}); 

删除ur css中的onhover css

请参阅此小提琴，然后尝试此代码

<!-- 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>

$（'ul.nav li.dropdown'）。悬停（函数（）{
$（this）.find（'.dropdown menu'）.stop（true，true）.delay（0）.fadeIn（）；
$（“#菜单插入符号”）.addClass（'Glyphion-Glyphion-chevron-up'）；
$（“#菜单插入符号”）.removeClass（'caret'）；
}，函数（）{
$（this）.find（'.dropdown menu'）.stop（true，true）.delay（0）.fadeOut（）；
$（“#菜单插入符号”）.addClass（“插入符号”）；
$（“#菜单插入符号”）.removeClass（'glyphicon-glyphicon-chevron-up'）；
}); 

删除ur css中的onhover css

---

使用jQuery和一些次要的CSS来参考这个fiddle解决方案

$（函数（）{
$（“.dropdown”）。悬停(
函数（）{
$（'.dropdown menu'，this）.stop（true，true.fadeIn（“快速”）；
$（this.toggleClass（'open'）；
$（'span'，this）.toggleClass（“插入符号向上”）；
},
函数（）{
$（'.dropdown menu'，this）.stop（真，真）.fadeOut（“快速”）；
$（this.toggleClass（'open'）；
$（'span'，this）.toggleClass（“插入符号向上”）；
});
});
/*TODO检查是什么使悬停项呈深蓝色*/
navbar先生{
文本转换：大写；
边缘底部：0px；
}
.导航条反转{
垫底：70px；
填充顶部：70px；
}
.navbar反向。navbar导航>li>a{
颜色：白色；
}
.navbar品牌{
字号：700；
字体大小：20px；
字母间距：2px；
}
.navbar反转.navbar切换{
边框颜色：透明；
}
.navbar trans{
背景色：#279ddd；
颜色：#fff；
边框底宽：1px；
边框颜色：#fff；
}
.navbar trans li>a：悬停，
.navbar trans li>a：焦点，
.navbar trans li.active{
背景色：#38afef；
}
.navbar trans a{
颜色：#fefefe；
}
/*下拉菜单样式*/
下拉菜单{
背景色：#279ddd；
}
下拉菜单{
背景色：#279ddd；
}
下拉菜单LIA{
颜色：白色；
}
/*悬停下拉菜单*/
.侧边栏导航{
填充：9px0；
}
.下拉菜单.子菜单{
左：100%；
位置：绝对位置；
排名：0；
可见性：隐藏；
页边顶部：-1px；
}
.下拉菜单li:悬停.子菜单{
能见度：可见；
}
.下拉菜单：悬停.下拉菜单{
显示：块；
}
.导航选项卡.下拉菜单，
.导航药丸.下拉菜单，
.navbar.下拉菜单{
边际上限：0；
}
.navbar.子菜单：之前{
边框底部：7px实心透明；
左边界：无；
右边框：7px实心rgba（0,0,0,0.2）；
边框顶部：7px实心透明；
左：-7px；
顶部：10px；
}
.navbar.子菜单：之后{
边框顶部：6px实心透明；
左边界：无；
右边框：6px实心#fff；
边框底部：6px实心透明；
左：10px；
顶部：11px；
左-6px；
}
.插入{
宽度：0；
身高：0；
左边框：4倍实心rgba（0,0,0,0）；
右边框：4px实心rgba（0,0,0,0）；
边框底部：4px实心；
显示：内联块；
左边距：2倍；
垂直对齐：中间对齐；
}

切换导航














使用jQuery和一些次要CSS的解决方案


$（函数（）{
$（“.dropdown”）。悬停(
函数（）{
$（'.dropdown menu'，this）.stop（true，true.fadeIn（“快速”）；
$（this.toggleClass（'open'）；
$（'span'，this）.toggleClass（“插入符号向上”）；
},
函数（）{
$（“.下拉菜单”，此