如何解决使用带有字形图标的 Bootstrap Accordion:需要将默认状态更改为要展开的部分 “折叠”不起作用
我试图在单击时展开/折叠包含图像的部分,并且我希望该部分的标题具有 +/- 字形。最后但并非最不重要的一点是,我需要控制默认状态是折叠还是扩展(我会通过将变量传递给 html 来做到这一点)。
我自己制作了以下代码,但是当我将此代码插入到我的 django 项目中时 - 该部分根本不会折叠,而字形会按照应有的方式更改。 可能有什么问题? (我认为要在默认情况下扩展该部分,我需要在课后添加“in”,并为 glyphicon 添加“glyphicon-minus”。)
提前致谢
<!DOCTYPE html>
<html lang="en" >
<head>
<Meta charset="UTF-8">
<title>BootStrap Accordion/Collapse with Toggle Icon</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapSEOne" aria-expanded="true" aria-controls="collapSEOne">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!--<body> -->
<button id='b'>
<span class="more-less glyphicon glyphicon-minus"></span>
</button>
<!-- </body> -->
TITLE
</a>
</h4>
</div>
<div id="collapSEOne" class="panel-collapse collapse in" aria-labelledby="headingOne"
<img class="card-img-top img-responsive" src="https://cdn.logo.com/hotlink-ok/logo-social.png">
</div>
</div>
</div><!-- container -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script id="rendered-js" >
/*******************************
* ACCORdioN WITH TOGGLE ICONS
*******************************/
function toggleIcon(e) {
$(e.target).
prev('.panel-heading').
find(".more-less").
toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse',toggleIcon);
$('.panel-group').on('shown.bs.collapse',toggleIcon);
//# sourceURL=pen.js
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。