引导：更改面板标题onClick的颜色 [英] Bootstrap: Change Color of Panel Heading onClick
本文介绍了引导：更改面板标题onClick的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我昨晚在bootstrap给了自己一个失败的课程，我有很多的乐趣。我在网上找到一个可折叠面板，对我希望在我的导航栏中实现的工作真的很好。但是，我希望面板标题的背景颜色在展开时更改。我不熟悉bootstrap的内部工作，但我自己的面条（很快！我希望）。代码如下：
< div class =panel-group minmargid =accordion>
< div class =panel panel-default>
< div class =panel-heading>
< h4 class =panel-title>
< a data-toggle =collapsedata-parent =＃accordionhref =＃collapseOne>
OPI< b class =caret>< / b>
< / a>
< / h4>
< / div>
< div id =collapseOneclass =panel-collapse collapse>
< div class =panel-body minmarg>
< ul class =nav nav-pill nav-stack pill-trngtheme minmarg>
< li role =presentation>< a href =＃> OPI主要网站< / a>
< / li>
< li role =presentationclass =active>< a href =＃>培训< / a>
< / li>
< li role =presentation>< a href =＃>程序< / a>
< / li>
< li role =presentation>< a href =＃>纠正措施< / a>
< / li>
< li role =presentation>< a href =＃>人性化绩效< / a>
< / li>
< li role =presentation>< a href =＃> LEAN管理< / a>
< / li>
< li role =presentation>< a href =＃>操作说明< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
< / div>
解决方案
Webforwork 。
使用 toggleclass 更改类。
strong> CSS
.panel-clr {
background-color：greenyellow;
}
.panel-clr.on {
background-color：dodgerblue;
}
JS
$（function（）{
$（'panel-clr' .toggleClass（'on'）;
}）
}）;
希望这有助于你。
div class =snippetdata-lang =jsdata-hide =false>
<！DOCTYPE html>< html lang =en> < head> < meta charset =utf-8> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < meta name =viewportcontent =width = device-width，initial-scale = 1> < meta name =descriptioncontent => < meta name =authorcontent => < link rel =iconhref =../../ favicon.ico> < title> Bootstrap的入门模板< / title> <！ - Bootstrap core CSS> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>< style> body {padding-top：50px;} .spacer {margin-top：2％; margin-bottom：2％;} .block {height：440px;} .panel-clr {background-color：greenyellow;} .panel-clr.on {background-color：dodgerblue;}< / style> head>< body> < nav class =navbar navbar-inverse navbar-fixed-top> < div class =container> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar> < span class =sr-only> Toggle navigation< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < / button> < a class =navbar-brandhref =＃>项目名称< / a> < / div> < div id =navbarclass =collapse navbar-collapse> < ul class =nav navbar-nav navbar-right> < li class =active>< a href =＃>首页< / a>< / li> < li>< a href =＃about>关于< / a>< / li> < li>< a href =＃contact>联系人< / a>< / li> < / ul> < / div><！ - /。nav-collapse - > < / div> < / nav>< div class =container col-lg-12 spacer>< / div>< div class =container col-lg-12>< div class =col-lg -10 col-md-10 col-sm-10 col-xs-10 bg-info block> < div class =panel-group minmargid =accordion> < div class =panel> < div class =panel-heading panel-clr> < h4 class =panel-title> < a data-toggle =collapsedata-parent =＃accordionhref =＃collapseOne> OPI< b class =caret>< / b> < / a> < / h4> < / div> < div id =collapseOneclass =panel-collapse collapse> < div class =panel-body minmarg> < ul class =nav nav-pills nav-stack pill-trngtheme minmarg> < li role =presentation>< a href =＃> OPI主要网站< / a> < / li> < li role =presentationclass =active>< a href =＃>培训< / a> < / li> < li role =presentation>< a href =＃>程序< / a> < / li> < li role =presentation>< a href =＃>纠正措施< / a> < / li> < li role =presentation>< a href =＃>人性化绩效< / a> < / li> < li role =presentation>< a href =＃> LEAN管理< / a> < / li> < li role =presentation>< a href =＃>操作说明< / a> < / li> < / ul> < / div> < / div> < / div> < / div> < / div> < / div>< / - / .container - > <！ - Bootstrap core JavaScript ========================================== ======== - > <！ - 放置在文档的末尾，以便页面加载更快 - > < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script> < script> $（function（）{$（'。panel-clr'）。click（function（）{$（this）.toggleClass（'on'）;}）}）; < / script> < / body>< / html>
Hi I gave myself a crash course in bootstrap last night and I'm having a lot of fun with it. I found online a collapsible panel that works really well for what I am hoping to achieve in my navbar. However I want the background color of the panel heading to change when expanded. I am not familiar enough with the inner workings of bootstrap yet to noodle it out on my own (soon! I hope). Code in question is below:
<div class="panel-group minmarg" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
OPI<b class="caret"></b>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body minmarg">
<ul class="nav nav-pills nav-stacked pill-trngtheme minmarg">
<li role="presentation"><a href="#">OPI Main Site</a>
</li>
<li role="presentation" class="active"><a href="#">Training</a>
</li>
<li role="presentation"><a href="#">Procedures</a>
</li>
<li role="presentation"><a href="#">Corrective Action</a>
</li>
<li role="presentation"><a href="#">Human Performance Improvement</a>
</li>
<li role="presentation"><a href="#">LEAN Management</a>
</li>
<li role="presentation"><a href="#">Coduct of Operations</a>
</li>
</ul>
</div>
</div>
</div>
</div>
解决方案
Webforwork, Hi there.
How about something like this and change the class, using toggleclass.
CSS
.panel-clr {
background-color:greenyellow;
}
.panel-clr.on {
background-color:dodgerblue;
}
JS
$( function() {
$('.panel-clr').click( function() {
$(this).toggleClass('on');
} )
});
Hope this helps you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 440px;
}
.panel-clr {
background-color:greenyellow;
}
.panel-clr.on {
background-color:dodgerblue;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-info block">
<div class="panel-group minmarg" id="accordion">
<div class="panel ">
<div class="panel-heading panel-clr">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
OPI<b class="caret"></b>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body minmarg">
<ul class="nav nav-pills nav-stacked pill-trngtheme minmarg">
<li role="presentation"><a href="#">OPI Main Site</a>
</li>
<li role="presentation" class="active"><a href="#">Training</a>
</li>
<li role="presentation"><a href="#">Procedures</a>
</li>
<li role="presentation"><a href="#">Corrective Action</a>
</li>
<li role="presentation"><a href="#">Human Performance Improvement</a>
</li>
<li role="presentation"><a href="#">LEAN Management</a>
</li>
<li role="presentation"><a href="#">Coduct of Operations</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$( function() {
$('.panel-clr').click( function() {
$(this).toggleClass('on');
} )
});
</script>
</body>
</html>
这篇关于引导：更改面板标题onClick的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
