twitter-bootstrap Bootstrap Dropdown 使下拉箭头改变方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31677222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 22:59:45 来源:igfitidea点击:
Bootstrap Dropdown Make Dropdown arrow change Direction
提问by Pabi
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.
我正在寻找一种方法，使引导程序下拉菜单箭头在菜单关闭时从朝上改变方向，在菜单打开时使方向朝下。
This is my html code:
这是我的 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>
I think it would be easiest to do in js.
我认为在 js 中最容易做到。
Here is my jsfiddle code: https://jsfiddle.net/Pabi/RxguB/75/
这是我的 jsfiddle 代码：https://jsfiddle.net/Pabi/RxguB/75/
Thank you.
谢谢你。
回答by Jose Cifuentes
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>
That's it!
而已！
回答by Nagesh Sanika
Try this 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">
<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>
and add script
并添加脚本
<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>
remove onhover css in ur CSS
在你的 CSS 中删除 onhover css
refer this fiddle http://jsfiddle.net/7o8sLhgf/
回答by vanburen
Solution using jQuery and some minor CSS.
使用 jQuery 和一些次要 CSS 的解决方案。
$(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");
});
});/*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;
}<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>