twitter-bootstrap Bootstrap：更改面板标题的颜色 onClick

Question

提问by webforwork

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:

嗨，我昨晚给自己上了一个自举速成课程，我玩得很开心。我在网上找到了一个可折叠面板，它非常适合我希望在导航栏中实现的功能。但是我希望面板标题的背景颜色在展开时改变。我对 bootstrap 的内部工作还不够熟悉，还不能自己解决（很快！我希望）。有问题的代码如下：

            <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>

Answer 1

回答by dieuvn3b

You can reference to document

您可以参考文档

Here code for you:

这里的代码给你：

$(".collapse").on('shown.bs.collapse',function(){
     // change background when expanded

});
$(".collapse").on('hidden.bs.collapse',function(){
     // change background when hide
});

Answer 2

回答by AngularJR

Webforwork, Hi there.
How about something like this and change the class, using toggleclass.

Webforwork，你好。
像这样的事情如何改变类，使用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>

Answer 3

回答by Resonance

AngularJR answer is correct but I found it a little hard to understand with my limited knowledge of css and non-existent knowledge of jQuery. Plus I am using react and so tweaking DOM elements after they have been rendered wasn't a good approach for me.

AngularJR 的答案是正确的，但由于我对 css 的了解有限且对 jQuery 一无所知，我发现这有点难以理解。另外，我正在使用 react，因此在渲染后调整 DOM 元素对我来说不是一个好方法。

Core Principle

核心原则

The basic principle of what is going on is that an extra class tag is being added to the html element:

正在发生的事情的基本原则是将一个额外的类标记添加到 html 元素：

So

所以

<div class="panel-heading">...</div>

becomes

变成

<div class="panel-heading on">...</div>

It doesn't really matter how you add in these extra classes, jQuery ($) is just one option.

如何添加这些额外的类并不重要，jQuery ( $) 只是一种选择。

Different css rules can now be applied to these two divs using the css selectors:

现在可以使用 css 选择器将不同的 css 规则应用于这两个 div：

.panel-heading {
    background-color:greenyellow;
}

and

和

.panel-heading.on {
    background-color:dodgerblue;
}

respectively.

分别。

Notice that there is no space between .panel-headingand .on. See the following stack overflow question for more information: What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space).

请注意，.panel-heading和之间没有空格.on。有关更多信息，请参阅以下堆栈溢出问题：CSS 类 .foo.bar (without space) 和 .foo .bar (with space) 之间有什么区别。

My aside about solving the problem when using react

关于在使用反应时解决问题的我的旁白

However in the case of using react-bootstrap the "panel-heading"div is created automatically by the tag <Panel>and the <div class="panel-heading">element can't be searched for and accessed after it has been rendered (the react life cycle is weird). So no extra classes can be added to it.

然而，在使用 react-bootstrap 的情况下，"panel-heading"div 是由标签自动创建的，<Panel>并且<div class="panel-heading">元素在渲染后无法搜索和访问（反应生命周期很奇怪）。所以没有额外的类可以添加到它。

So the extra class, "on", needs to be added to a parent element of the panel-headingdiv:

所以额外的类 ,"on"需要添加到panel-headingdiv的父元素中：

html (or .jsx):

html（或 .jsx）：

<div class="on">
    <Panel header="My Title">...STUFF...</Panel>
</div>

results in a DOM that looks like this (slightly simplified):

导致 DOM 看起来像这样（稍微简化）：

<div class="on">
   <div class="panel">
       <div class="panel-heading">
           My Title
       </div>
       <div class="panel-body">
           .....STUFF.....
       </div>
   </div>
</div>

There is now an outer div with the "on"class and the "panel-heading"div is contained within it.

现在有一个带有"on"该类的外部 div，并且该"panel-heading"div 包含在其中。

The panel-heading div can now be styled in css using the following selectors:

现在可以使用以下选择器在 css 中设置面板标题 div 的样式：

.panel-heading {
    background-color:greenyellow;
}

and

和

.on .panel-heading {
    background-color:dodgerblue;
}

Notice how the .onselector is now before the .panel-headingselector and there is also a space between the two selectors; this is because the element with the .onclass is now a ancestor of the element with the .panel-headingclass.

注意.on选择器现在如何在选择器之前，.panel-heading并且两个选择器之间还有一个空格；这是因为具有.on类的元素现在是具有.panel-heading类的元素的祖先。

Note: Adding the extra "on"class directly to <Panel>and not enclosing the panel in an extra div would work similarly.

注意：将额外的"on"类直接添加到<Panel>额外的 div 中而不将面板包含在额外的 div 中的工作方式类似。

Now the "onClick" handler can change the class of the parent element to affect the styling of the panel-heading, which is much easier than searching the DOM for the correct "panel-heading div"(IMHO). And crucially, in my case of using react, this "on"class can be specified directly for an element when calling the render routine.

现在“onClick”处理程序可以更改父元素的类来影响面板标题的样式，这比在 DOM 中搜索正确的"panel-heading div"（恕我直言）要容易得多。至关重要的是，在我使用 react 的情况下，"on"可以在调用渲染例程时直接为元素指定此类。

twitter-bootstrap Bootstrap：更改面板标题的颜色 onClick

提问by webforwork

回答by dieuvn3b

回答by AngularJR

回答by Resonance

Core Principle

核心原则

My aside about solving the problem when using react

关于在使用反应时解决问题的我的旁白

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap：更改面板标题的颜色 onClick

提问by webforwork

回答by dieuvn3b

回答by AngularJR

回答by Resonance

Core Principle

核心原则

My aside about solving the problem when using react

关于在使用反应时解决问题的我的旁白

相关推荐

twitter-bootstrap 响应式 jqGrid 与列标题的引导程序类

twitter-bootstrap 更改导航栏“引导程序”中的文本颜色

twitter-bootstrap 引导中心 3 col-md-3 div

twitter-bootstrap 列出水平显示的复选框

相关推荐

最近更新

标签