带有向上和向下箭头的手风琴没有相应地工作
Posted
技术标签:
【中文标题】带有向上和向下箭头的手风琴没有相应地工作【英文标题】：accordion with up and down arrow is not working accordingly 【发布时间】：2021-08-13 09:14:41 【问题描述】：当我第二次单击手风琴时，以下代码无法正常工作。手风琴中的向上和向下箭头不起作用。
<script type="text/javascript">
$('.panel-collapse').on('hide.bs.collapse', function ()
debugger;
$(this).siblings('.panel-heading').removeClass('active');
);
$('.panel-collapse').on('show.bs.collapse', function ()
debugger;
$(this).siblings('.panel-heading').addClass('active');
);
https://codepen.io/nhembram/pen/XKEJJp
我试图在项目中实现相同的，但箭头不起作用
【问题讨论】：
在上面的代码中也可以添加html吗？ 这样很难理解。 【参考方案1】：根据您提供的 codepen.io 链接。图标的过渡由 CSS 处理。
您能否分享更多详细信息，可能是您的项目中的 CSS 被另一个 CSS 覆盖，因为您的脚本看起来不错，但需要了解您在项目中使用的内容。所以我可以帮你。
同时你也可以看看下面的代码可能对你有帮助。
function toggleIcon(e)
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-menu-down glyphicon-menu-up');
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);.
.panel-group .panel
border-radius: 0;
box-shadow: none;
border-color: #EEEEEE;
.panel-default > .panel-heading
padding: 0;
border-radius: 0;
color: #212121;
background-color: #FAFAFA;
border-color: #EEEEEE;
.panel-title
font-size: 14px;
.panel-title > a
display: block;
padding: 15px;
text-decoration: none;
.more-less
float: right;
color: #212121;
.panel-default > .panel-heading + .panel-collapse > .panel-body
border-top-color: #EEEEEE;
/* ----- v CAN BE DELETED v ----- */
body
background-color: #26a69a;
.demo
padding-top: 60px;
padding-bottom: 110px;
.demo-footer
position: fixed;
bottom: 0;
width: 100%;
padding: 15px;
background-color: #212121;
text-align: center;
.demo-footer > a
text-decoration: none;
font-weight: bold;
font-size: 14px;
color: #fff;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-menu-down"></i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
panel body elements should be added here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="more-less glyphicon glyphicon-menu-down"></i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
panel body elements should be added here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="more-less glyphicon glyphicon-menu-down"></i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
panel body elements should be added here
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于带有向上和向下箭头的手风琴没有相应地工作的主要内容，如果未能解决你的问题，请参考以下文章
带有第一个 div 的 jQuery 自定义手风琴在初始加载时打开 - 修改箭头图像的问题