首页> 疑难解答
bootstrap 4通过javascript崩溃
withpy
2021-06-26
简介我有一个带可折叠手风琴表的bootstrap 4页面。每个都有一个fa-plus-circle图标。当用户点击此按钮时,该图标会在我点击之后变为fa-minus-circle图标...
我有一个带可折叠手风琴表的bootstrap 4页面。每个都有一个fa-plus-circle图标。当用户点击此按钮时,该图标会变为fa-minus-circle图标,之后我点击了减号圆图标或按钮,绝对不会变成加圆图标。 Plss帮忙!
<link rel="stylesheet" href="../../assets/css/bs/bootstrap.css">
<link rel="stylesheet" href="../../assets/css/custom/custom.css">
<link rel="stylesheet" href="../../assets/css/bs/bootstrap.min.css">
<link rel="shortcut icon" href="../../assets/img/logo/logoCircle.png" type="image/x-icon">
<link rel="stylesheet" href="../../assets/css/fontawesome/all.css">
<link rel="stylesheet" href="../../assets/css/animate/animate.css">
<script type="text/javascript">
toggleCircle = function(e) {
if ($(e.children).attr("class").includes('down')) {
$(e.children).removeClass("fa-minus-circle");
$(e.children).addClass("fa-plus-circle");
} else {
$(e.children).removeClass("fa-plus-circle");
$(e.children).addClass("fa-minus-circle");
}
}
</script>
<div class="container">
<div class="row">
<div class="accordion col-12" id="accordionExample">
<div class="card">
<div class="card-header bg-light" id="headingOne">
<h2 class="mb-0">
<button class="btn text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" onclick="toggleCircle(this)" >
<span class="fa fa-plus-circle"></span>
How do I recover my account?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span>Were sorry to hear that! If you can't sign in to your Pandayan EGC Account.<br><br>
To reset your password:<br>
1. Go to the login page and you see the forgot your password and click that. Enter your email address click proceed.<br>
2. Once you click the proceed button go to your gmail account and there's an email. <br>
3. After that you create new password and click save changes. <br>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../assets/js/jquery/jquery-3.3.1.js"></script>
<script src="../../assets/js/popper/popper.min.js"></script>
<script src="../../assets/js/bs/bootstrap.min.js"></script>
<script src="../../assets/js/fontawesome/all.js"></script>
<script src="../../assets/js/backstretch/backstretch.js"></script>
<script src="../../assets/js/backstretch/backstretchSettings01.js"></script>
<script src="../../assets/js/bsn/bootstrap-notify.min.js"></script>
<script src="../../assets/js/general/loader.js"></script>
<script src="../../assets/js/general/login.js"></script>
<script src="../../assets/js/general/forgotpassword.js"></script>
<script src="../../assets/js/general/accountregister.js"></script>
投票
不要说你根本不需要任何JS!只需一行CSS
.collapsed .fas:before {
content: "\f055"; /* https://fontawesome.com/cheatsheet */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<button class="btn text-dark collapsed" type="button " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<span class="fas fa-minus-circle"></span> How do I recover my account?
</button>
<div id="collapseOne" class="collapse">OU YEAH</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
而且,从逻辑上讲,如果你开始崩溃,请使用<span class="fas fa-minus-circle"></span>
。
为了解释,Bootstrap已经在danymically切换collapsed
按钮类。所以上面所做的,是使用CSS的目标,找到.fas
图标并将其更改为所需的图标。
相关文章
-
REST API中的错误处理:最佳实践
我正在努力开发一个基本上返回国家信息的休息api。所以我的网址将是http:// myrestservice / country / US,所以当请求来自有效国家时,我...
-
Angular 2路由到具有不同URL的相同组件
如何路由到相同的组件但具有不同的URL和不同的数据,例如/ exports / open - ExportsListComponent数据:{exportstatus:'open'} / exports / submitted - ...
-
任何更改后的Android Firebase数据库活 动/片段正在关闭
我开发了一个Android应用程序,我使用Firebase进行身份验证,数据库和存储。在我的应用程序中有导航视图,有5 6个片段。例如,有一个配置文件片段,...
-
将JSON数据存储到Node中的URL变量中?
我试图将JSON数据存储到JSON文件中的节点变量中,该文件位于https://data.sfgov.org/resource/wwmu-gmzc.json告诉我该怎么做?先感谢您!
-
如何以角度模拟模型
我有一个函数接受模型作为输入selectFault(fault:Fault){this.faultsService.setSelectedFault(fault)this.router.navigate(['fault-detail']);我已经生成了......
-
如何在WPF中设置样式和样式触发器
我试图将WPF内容控件的样式设置为动态资源。我很容易做到这一点: ... ...