Bootstrap Dropdown使下拉箭头更改方向 [英] Bootstrap Dropdown Make Dropdown arrow change Direction

问题描述

我正在寻找一种使Bootstraps下拉菜单箭头的方向从菜单关闭时向上的方向和菜单打开时向下的方向。

I am looking for a way to make the bootstraps dropdown menu arrow change directions from facing up when menu is closed and down when menu is open.

这是我的html代码：

This is my html code:

<!-- 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做起来最简单。

I think it would be easiest to do in js.

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

Here is my jsfiddle code: https://jsfiddle.net/Pabi/RxguB/75/

谢谢。

推荐答案

I刚遇到同样的问题。我想使插入标记图标在下拉菜单处于活动状态时向上显示，而在非活动状态时变为正常（向下）。这是我的解决方案：

I just encountered the same issue. I wanted to make the caret icon look up when dropdown was active, and normal (down) when it was not. This is my solution:

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

就是这样！

这篇关于Bootstrap Dropdown使下拉箭头更改方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！