单击Bootstrap 3折叠更改V形图标
我已经阅读了有关我的问题的所有相关问题，并尝试了所有这些问题都无济于事。 我似乎无法使我的代码工作，即使我“思考”我写的几乎所有代码与本网站上发布的解决方案相同。
这是HTML代码：
Services Offered
...
这是JQuery
$('#serviceList').on('shown.bs.collapse'), function() { $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down'); } $('#serviceList').on('hidden.bs.collapse'), function() { $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up'); }
我只是想在折叠元素时将图标从下到上更改。 然后在单击同一个类时切换回。 我真的很困惑这个。 先感谢您！
问题是你的jQuery代码不正确。
您将在此行的早期关闭事件处理函数：
$('#serviceList').on('shown.bs.collapse'), function() {
看到第二个右括号？ 那早就关闭了’on’function。 尝试将jQuery更改为如下所示：
$('#serviceList').on('shown.bs.collapse', function() { $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down'); }); $('#serviceList').on('hidden.bs.collapse', function() { $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up'); });
纯CSS。
HTML部分：
Open/Close collapse
这里的关键因素是aria-expanded =“false”或“true”
CSS：
a[aria-expanded=true] .fa-chevron-right { display: none; } a[aria-expanded=false] .fa-chevron-down { display: none; }
试试这个更优雅的解决方案
$('#serviceList').click(function(){ $(this).find('.servicedrop').toggleClass('icon-chevron-down icon-chevron-up'); });
与Bojan的答案类似，我使用这个解决方案。
像这样更改HTML代码：
关于.on最好使用.on事件。 此外，通过使用类选择器，它可以用作站点范围的解决方案。
$('.chevron_toggleable').on('click', function() { $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); });
你可以试试这个。
这是HTML代码：
Collapsible Group Item #1
这是JQuery
$('#accordion').on('shown.bs.collapse hidden.bs.collapse', function (e) { $(e.target).prev('.panel-heading').find("span.glyphicon").toggleClass('glyphicon-chevron-up glyphicon-chevron-down',200, "easeOutSine" ); });
我能找到的最简单的答案，并认为在这里添加其他人是有用的。
基本上这涉及到这一点css
/* Rotating glyphicon when expanding/collapsing */ .collapse-chevron .glyphicon { transition: .3s transform ease-in-out; } .collapse-chevron .collapsed .glyphicon { transform: rotate(-90deg); }
适用于这一点的html
link to toggle Some content I want collapsed or expanded
Codepen的代码： https ：//codepen.io/anon/pen/PKxzVa
来源： 这篇文章
有关更多示例，请参阅文章中的codepen： https ：//codepen.io/disjfa/pen/EZdMpe
修复了改变HTML / CSS的问题
HTML：
View Doc
CSS：
.yt-toggle.collapsed .fa-caret-down { display: none; } .yt-toggle.collapsed .fa-caret-right { display: inline-block; } .yt-toggle .fa-caret-right { display: none; }
如果你使用angularjs你可以尝试这个。
html的
.js文件
$scope.enlarge = function(myID) { $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small"; }
切换最后一个或做比较
if ( $scope.fullglyphon[myID] == "btn btn-xs btn-primary glyphicon glyphicon-resize-small" ) { $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-full"; }else{ $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small"; }
对于Bootstrap 4中的更改崩溃图标，最小的html更改，我已经完成了
-
添加到css：
a[data-toggle="collapse"]:after { font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; color: #4285F4; } a[data-toggle="collapse"].collapsed:after { content: "\e080"; } @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
-
将字体放在与css相关的适当位置：
\css\style.css \fonts\glyphicons-halflings-regular.eot \fonts\glyphicons-halflings-regular.svg \fonts\glyphicons-halflings-regular.ttf \fonts\glyphicons-halflings-regular.woff \fonts\glyphicons-halflings-regular.woff2
-
并将class="collapsed"添加到所有折叠（默认情况下）链接：
Collapsed link
我想提供一个与此处发布的另一个解决方案相同的选项，但是使用带有转换的单个div。
`a [aria-expanded = true] .fa-chevron-right {transform：rotate（0deg）; }
a [aria-expanded = false] .fa-chevron-right {transform：rotate（90deg）; //或者你需要的任何方向}`