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=".3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src=".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=".3.7/js/bootstrap.min.js"></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./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis./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./bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>- or give it a class of caret-down instead of caret-up when you add it to the DOM in your event handler – mhodges Commented Sep 28, 2016 at 18:51
2 Answers
Reset to default 4Truly 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 ment. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery./jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn./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>$(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>');
});
});
Your javascript is referencing pv1 class. You should change it to
$(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>');
});
});
in order to access your element with pv1 id.
Also, as @mhodges points out, add a caret-down to the "hide", so that it changes to down. Otherwise, when it goes back up, it will change to an up caret, and never revert back to down.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745279304a4620201.html
评论列表（0条）