如何使下拉箭头（插入图标引导程序）更改点击？ [英] How to Make Dropdown arrow(caret icon bootstrap) change On Click?
本文介绍了如何使下拉箭头（插入图标引导程序）更改点击？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在bootstrap导航药丸的下拉列表中更改脱字符号图标？我不知道如何使用 hide.bs.dropdown
<！DOCTYPE html>< HTML>< HEAD> < meta content =text / html; charset = utf-8http-equiv =Content-Type> < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheettype =text / css> < script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script> <风格> .caret-container {float：right; } .caret.caret-up {border-top-width：0; border-bottom：4px solid; }< / style>< / head>< body> < ul class =nav nav-pills nav-stackedid =stacked-menu> < a href =class =list-group-item>质量< / a> < a href =zertifikate.htmlclass =list-group-item active> Cert< / a> < ul class =nav nav-pills nav-stacked collapse inid =p1> < li data-toggle =collapsedata-parent =＃p1href =＃pv1> < a class =nav-container list-group-item> Leist< div class =caret-container>< span class =caret caret-up>< / span>< DIV>< / A> < /锂> < ul class =nav nav-pills nav-stacked collapse outid =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> <脚本> $（document.ready）（function（）{$（。pv1）。on（hide.bs.dropdown，function（）{$（。pv1）。html（'< span class = （'.btn）.html（'< / span>'）;}）; $（。collapse）。 span class =caret caret-up>< / span>'）;}）;}）; < /脚本> < script type =text / javascriptsrc =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< / body>< ; / html>
>在Glyphicons和字体真棒发布后真正地说。没有人使用脱字符号。那么你看起来像这样一个 CaretLiveFiddle ....或者你可以尝试Ghypicons与nav-pills折叠 GlyphiconsUseForCollapse 。如果您有任何问题，可以发表评论。谢谢。
<！DOCTYPE html>< html>< head> < meta content =text / html; charset = utf-8http-equiv =Content-Type> < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheettype =text / css> < script type =text / javascriptsrc =https://code.jquery.com/jquery-3.1.0.min.js>< / script> < script type =text / javascriptsrc =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script> <风格> .caret-container {float：right; } .caret-up {border-top-width：0; border-bottom：4px solid; }< / style>< / head>< body> < ul class =nav nav-pills nav-stackedid =stacked-menu> < a href =class =list-group-item>质量< / a> < a href =zertifikate.htmlclass =list-group-item active> Cert< / a> < ul class =nav nav-pills nav-stacked collapse inid =p1> < li data-toggle =collapsedata-parent =＃p1href =＃pv1> < a class =nav-container list-group-item> Leist< div class =caret-container>< span class =caret caret-down>< / span>< DIV>< / A> < /锂> < ul class =nav nav-pills nav-stacked collapse outid =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> <脚本> $（'。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（向上 ）addClass（ 脱字符号向下）;}）; < / script>< / body>< / html>
How to change caret icon on dropdown in bootstrap nav-pills?
I don't know how to use 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>
解决方案
Truly saying after Glyphicons and font-awesome published. No one use caret. So are you looking something like this one CaretLiveFiddle .... Or you can try Ghypicons with the nav-pills collapsing GlyphiconsUseForCollapse. If you have any question you can ask me in comment. Thank you.
<!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>
这篇关于如何使下拉箭头（插入图标引导程序）更改点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
