Utiliser Bootstrap pour obtenir un effet accordéon

Les mots précédents

Le plug-in Collapse (pliage) dans le framework Bootstrap est en fait notre effet accordéon commun. Lorsqu'un élément déclencheur est cliqué, il est affiché ou masqué dans une autre zone réductible, et l'état d'affichage peut être inversé lorsque vous cliquez à nouveau. La scène classique est le style accordéon de plusieurs zones de pliage et le style d'un seul titre/contenu. Cet article présentera en détail l'effet accordéon Bootstrap

structure

. La partie la plus critique de l'accordéon, c'est-à-dire que chaque titre correspond à un élément de contenu. Dans le cadre Bootstrap, ces deux parties sont combinées et appelées un panneau. Comme le montre l'effet ci-dessous, il y a trois panneaux. trois panneaux sont combinés ensemble, c'est un panneau combiné-groupe, c'est-à-dire la structure de l'accordéon

En termes simples, c'est un déclencheur et une zone de pliage.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button><div id="demo" class="collapse in">折叠区</div>

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">标题一对应的内容</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">标题二对应的内容</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题三</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">标题三对应的内容</div></div></div></div>

Déclenchement déclaratif

Déclenchement de l'accordéon peut être déclenché via l’attribut data-toggle personnalisé. La valeur data-toggle est définie sur effondrement, data-target="#folding area identifier". Regardons ensuite un exemple simple

Étape 1 : Concevez une combinaison de panneaux avec trois zones de pliage

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"></div><div class="panel panel-accordion panel-default"></div><div class="panel panel-accordion panel-default"></div></div>

Étape 2 : Donnez au panneau Ajoutez du contenu, chaque panneau comprend deux parties, la première est le titre du panneau, et ajoute le titre du panneau à l'intérieur. La deuxième partie est le contenu du panneau, qui est la zone de pliage, en utilisant le style de réduction du panneau

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title">标题一</h4></div><div class="panel-collapse"><div class="panel-body">折叠区内容...</div></div></div>

Étape 3 : Afin de lier le titre et la zone de contenu ensemble, vous peut utiliser des liens d'ancrage Méthode, connecter la zone de titre et la zone du panneau ensemble

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel2">标题二</a></h4></div><div class="panel-collapse" id="panel2"><div class="panel-body">折叠区内容...</div></div></div>......</div>

Étape 4 : Contrôlez si la zone de contenu du panneau est visible. Dans le framework Bootstrap, si vous souhaitez que la zone de contenu soit invisible, il vous suffit d'ajouter le style d'effondrement du panneau. Si vous souhaitez que la zone de contenu soit visible par défaut, vous devez ajouter le style d'effondrement et dans

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>

Étape 5 : Activez le comportement d'interaction en accordéon. Pour compléter le comportement interactif, vous devez personnaliser deux attributs dans le lien de titre. L'un est data-toggle et sa valeur est effondrement ; l'autre est data-target et sa valeur est l'identifiant de chaque zone de contenu du panneau, telle que ID Dans cet exemple, il s'agit respectivement de #panel1, #panel2 et #panel3 :

[Note] Il est normal de ne pas ajouter

dans ce cas, car il y a déjà data-target="#panel1" devant. , mais voici un bouton bouton Comme déclencheur, vous devez utiliser l'instruction href="#panel1" data-target="#panel1"

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4></div><div class="panel-collapse collapse in" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>

Étape 6 : Définissez l'attribut data-parent, de sorte que lorsque l'un des les éléments sont cliqués, toutes les zones de pliage sont fermées, puis ouvre la zone cliquée (ou se ferme si la zone cliquée est affichée). Cette valeur data-parent correspond à l'identifiant du conteneur du panneau accordéon. Par exemple, cet exemple fait référence à #myAccordion

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a></h4></div>…

À travers les 6 étapes ci-dessus, les points suivants peuvent être. résumé

　☑ Utilisez le titre du panneau comme élément déclencheur et l'élément parent du corps du panneau comme zone de pliage

　☑ Utilisez un groupe de panneaux pour contenir plusieurs panneaux ; pour obtenir un effet accordéon ;

　☑ Chaque élément déclencheur du panneau doit spécifier l'attribut data-parent. La valeur de l'attribut data-parent correspond à l'ID ou à un autre identifiant de style de l'élément de style panel-group. ;

　☑ Élément déclencheur Data-toggle doit être spécifié et la valeur est cliff

　☑ L'élément déclencheur doit spécifier l'attribut data-target. l'attribut correspond à l'ID ou à un autre identifiant de style de l'élément parent du corps du panneau ; s'il s'agit d'un élément, vous pouvez spécifier l'attribut href au lieu de

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div>

Déclencheur JS

[Mot clé]

<span style="color: #000000;">$(element).collapse('show');//显示折叠区域
$(element).collapse('hide');//隐藏折叠区域
$(element).collapse('toggle');//反转折叠区域<br></span>

显示折叠区域隐藏折叠区域反转折叠区域<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){
    $('#btn1').click(function(){
        $('.collapse').collapse('show');
    })
    $('#btn2').click(function(){
        $('.collapse').collapse('hide');
    })
    $('#btn3').click(function(){
        $('.collapse').collapse('toggle');
    })
})</script>

【Événement】

Ce plug-in prend en charge 4 types d'événements Abonnez-vous

show.bs.collapse        show方法调用之后立即触发该事件
shown.bs.collapse   　　 此事件在collapse已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.collapse        hide方法调用之后立即触发该事件。
hidden.bs.collapse    　此事件在collapse被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题一" href="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题二" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题三" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){
    $("#accordion").on("show.bs.collapse",function(e){var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已打开]');
    }).on("hide.bs.collapse",function(e){var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已关闭]');
    })

});    
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!