Bootstrap: Changement de Couleur de Panneau de Tête onClick

Salut, je me suis donné un cours intensif dans le bootstrap de la nuit dernière et je vais avoir beaucoup de plaisir avec elle. J'ai trouvé en ligne un panneau réductible qui fonctionne vraiment bien pour ce que j'espère accomplir dans ma barre de navigation. Cependant je veux que la couleur de fond du panneau de tête de changer lors de son expansion. Je ne suis pas assez familier avec le fonctionnement interne de bootstrap encore de bricoler sur mon propre (bientôt! Je l'espère). Le Code en question est ci-dessous:

            <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>
  • Vous avez besoin d'utiliser javascript ou jquery pour faire ça.
InformationsquelleAutor webforwork | 2015-07-10
  1. 2

    Webforwork, Bonjour.

    Comment au sujet de quelque chose comme cela et changer la classe, à l'aide de toggleclass.

    CSS 

     .panel-clr {
        background-color:greenyellow;
    }     
 .panel-clr.on {
        background-color:dodgerblue;
    }

    JS 

    $( function() {
  $('.panel-clr').click( function() {
      $(this).toggleClass('on');
} )
});

    Espère que cela vous aide.

    HTML:

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

    • Merci! Avec un peu de bricolage, j'ai été capable de lui faire faire exactement ce que je voulais!
    InformationsquelleAutor AngularJR
  2. 4

    Vous pouvez faire référence à document

    Ici code pour vous:

    $(".collapse").on('shown.bs.collapse',function(){
//change background when expanded
});
$(".collapse").on('hidden.bs.collapse',function(){
//change background when hide
});
    InformationsquelleAutor dieuvn3b
  3. 1

    AngularJR réponse est correcte, mais je l'ai trouvé un peu dur à comprendre avec mes maigres connaissances en css et l'absence de connaissances de jQuery. En Plus je suis à l'aide de réagir et ainsi de peaufiner les éléments DOM, après avoir été rendue n'était pas une bonne approche pour moi.

    Principe De Base

    Le principe de base de ce qui se passe, c'est qu'une classe supplémentaire tag est ajouté à l'élément html:

    Donc

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

    devient

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

    Il n'a pas vraiment d'importance comment vous ajoutez dans ces classes supplémentaires, jQuery ($) n'est qu'une option.

    Différentes règles css peut maintenant être appliquée à ces deux divs en utilisant les sélecteurs css:

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

    et

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

    respectivement.

    Avis qu'il n'y a pas d'espace entre .panel-heading et .on. Voir la suite d'un débordement de pile question pour plus d'informations: Quelle est la différence entre les classes CSS .foo.bar (sans espace).foo .bar (avec un espace).

    Mon côté sur la résolution du problème lors de l'utilisation de réagir

    Toutefois, dans le cas de l'utilisation de réagir-l'amorçage de l' "panel-heading" div est créé automatiquement par le tag <Panel> et la <div class="panel-heading"> élément ne peut pas être consulté et recherché après qu'il a été rendu (le réagir cycle de vie est bizarre). Donc pas de cours supplémentaires peuvent être ajoutés.

    De sorte que la catégorie "extra", "on", doit être ajouté à un élément parent de l' panel-heading div:

    html (ou .jsx):

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

    résultats dans un DOM qui ressemble à ceci (légèrement simplifié):

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

    Il y a maintenant un div extérieure avec la "on" classe et la "panel-heading" div est contenue.

    Le panneau-titre div peut maintenant être stylé en css en utilisant les sélecteurs suivants:

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

    et

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

    Remarquez comment le .on sélecteur est maintenant devant le .panel-heading sélecteur et il y a aussi un espace entre les deux sélecteurs; c'est parce que l'élément avec la .on classe est maintenant un ancêtre de l'élément avec la .panel-heading classe.

    Remarque: l'Ajout de l'extra "on" classe directement à <Panel> et de ne pas enfermer le groupe dans un supplément div fonctionnerait de la même façon.

    Maintenant le "onClick" gestionnaire peut modifier la classe de l'élément parent à influer sur le style du panneau-titre, qui est beaucoup plus facile que la recherche dans les DOM pour la bonne "panel-heading div" (à mon humble avis). Et surtout, dans mon cas de l'utilisation de réagir, ce "on" classe peut être spécifié directement pour un élément lors de l'appel de la rendre routine.

    InformationsquelleAutor Resonance