如何使下拉箭头（插入符号图标引导程序）在单击时更改？
Posted
技术标签:
【中文标题】如何使下拉箭头（插入符号图标引导程序）在单击时更改？【英文标题】：How to Make Dropdown arrow(caret icon bootstrap) change On Click? 【发布时间】：2017-02-06 21:39:48 【问题描述】：如何在 bootstrap nav-pills 的下拉菜单中更改插入符号？
我不知道怎么用hide.bs.dropdown
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.caret-container
float: right;
.caret.caret-up
border-top-width: 0;
border-bottom: 4px solid;
</style>
</head>
<body>
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
<a href="" class="list-group-item">Quality</a>
<a href="zertifikate.html" class="list-group-item active">Cert</a>
<ul class="nav nav-pills nav-stacked collapse in" id="p1">
<li data-toggle="collapse" data-parent="#p1" href="#pv1">
<a class="nav-container list-group-item">Leist<div class="caret-container"><span class="caret caret-up"></span></div></a>
</li>
<ul class="nav nav-pills nav-stacked collapse out" id="pv1">
<li><a href="" class="list-group-item">sub1111</a></li>
<li><a href="" class="list-group-item">sub2222</a></li>
</ul>
</ul>
<a href="" class="list-group-item">Fdsafdsfs</a>
</ul>
<script>
$(document).ready(function()
$(".pv1").on("hide.bs.dropdown", function()
$(".pv1").html('<span class="caret"></span>');
);
$(".collapse").on("show.bs.dropdown", function()
$(".btn").html('<span class="caret caret-up"></span>');
);
);
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>【问题讨论】：
为什么投反对票？ 【参考方案1】：在 Glyphicons 和 font-awesome 出版后说的真话。没有人使用插入符号。所以你看起来像这样的CaretLiveFiddle .... 或者你可以尝试 Ghypicons 与导航药丸折叠GlyphiconsUseForCollapse。如果您有任何问题，可以在评论中问我。谢谢你。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.caret-container
float: right;
.caret-up
border-top-width: 0;
border-bottom: 4px solid;
</style>
</head>
<body>
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
<a href="" class="list-group-item">Quality</a>
<a href="zertifikate.html" class="list-group-item active">Cert</a>
<ul class="nav nav-pills nav-stacked collapse in" id="p1">
<li data-toggle="collapse" data-parent="#p1" href="#pv1">
<a class="nav-container list-group-item">Leist<div class="caret-container"><span class="caret caret-down"></span></div></a>
</li>
<ul class="nav nav-pills nav-stacked collapse out" id="pv1">
<li><a href="" class="list-group-item">sub1111</a></li>
<li><a href="" class="list-group-item">sub2222</a></li>
</ul>
</ul>
<a href="" class="list-group-item">Fdsafdsfs</a>
</ul>
<script>
$('.collapse').on('shown.bs.collapse', function()
$(this).parent().find(".caret-down").removeClass("caret-down").addClass("caret-up");
).on('hidden.bs.collapse', function()
$(this).parent().find(".caret-up").removeClass("caret-up").addClass("caret-down");
);
</script>
</body>
</html>【讨论】：
欢迎您。 [getbootstrap.com/components/#dropdowns] 你在代码中犯了一些错误。按照链接。你会发现你错误的部分。快乐编码。 :)【参考方案2】：$(document).ready(function()
$(".pv1").on("hide.bs.dropdown", function()
$(".pv1").html('<span class="caret"></span>');
);
$(".collapse").on("show.bs.dropdown", function()
$(".btn").html('<span class="caret caret-up"></span>');
);
);
您的 javascript 正在引用 pv1 类。您应该将其更改为
$(document).ready(function()
$("#pv1").on("hide.bs.dropdown", function()
$("#pv1").html('<span class="caret caret-down"></span>');
);
$(".collapse").on("show.bs.dropdown", function()
$(".btn").html('<span class="caret caret-up"></span>');
);
);
为了使用 pv1 id 访问您的元素。
另外，正如@mhodges 指出的那样，在“隐藏”中添加一个插入符号，使其变为向下。否则，当它重新向上时，它将变为向上插入符号，并且永远不会恢复为向下。
【讨论】：
我改了代码但是插入符号没有翻转，请检查this codesnippet 我认为它与@mostafa-baezid 有点不同。我发现这个工作： $(document).ready(function() $("#p1").on("click", function() $("#p1 .caret-container span").toggleClass( 'glyphicon-triangle-top glyphicon-triangle-bottom'); ); );以上是关于如何使下拉箭头（插入符号图标引导程序）在单击时更改？的主要内容，如果未能解决你的问题，请参考以下文章