Bootstrap-Collapse-Plugin

Im Allgemeinen das Wort Zusammenbruch ist eine Hierarchieansicht, sodass nur die Wurzeln jedes Zweigs sichtbar sind. Es wird häufig zur Verwaltung großer Inhalts- und Navigationslisten auf der Website verwendet. Wir können problemlos eine zusammenklappbare Unterteilung innerhalb einer Webseite erstellen, die zum Erstellen von Akkordeon-Navigation, Inhaltsfeldern usw. verwendet wird.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Die folgenden Beispiele veranschaulichen die Verwendung verschiedener Techniken zur Implementierung des Collapse-Plugins in Bootstrap. Wenn Sie Fragen dazu haben Bootstrap-Collapse-Pluginschreiben Sie es bitte in den Kommentarbereich.

Zusammenklappbares Bootstrap-Akkordeon

Im folgenden Beispiel wird erläutert, wie Sie mithilfe von ein zusammenklappbares Akkordeon erstellen .Zusammenbruch Klasse. Der Inhalt kann mit dem angezeigt werden .collapse.in Klasse. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Collapsible Accordion</h2>
<div   id="accordion">
   <div  >
        <div  >
            <h4  >
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse-one">HTML</a>
           </h4>
        </div>
        <div id="collapse-one"  >
        <div  >
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.  It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
          </div>
        </div>
    </div>
    <div  >
	        <div  >
	            <h4  >
	            <a data-toggle="collapse" data-parent="#accordion" href="#collapse-two">JavaScript</a>
	           </h4>
	        </div>
	        <div id="collapse-two"  >
	 <div  >
 JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
	</div>
	        </div>
    </div>
    <div  >
	        <div  >
	            <h4  >
	            <a data-toggle="collapse" data-parent="#accordion" href="#collapse-three">CSS</a>
	           </h4>
	        </div>
	        <div id="collapse-three"  >
			      <div  >
  CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
			      </div>
	        </div>
    </div>
</div>
</div>
</body>
</html>
  • Führen Sie das Beispiel für ein zusammenklappbares Akkordeon von Bootstrap aus

Beispiel für ein zusammenklappbares Bootstrap-Akkordeon

Bootstrap Collapsible Accordion über Datenattribute

Der Bootstrap ermöglicht das Erweitern und Reduzieren bestimmter Elemente durch die Verwendung einiger Datenattribute im Minimierungs-Plugin. Wir können hinzufügen Datenumschaltung zu einem Controller-Element wie einer Schaltfläche oder einem Anker, auf den wir klicken, um die Komponente zu erweitern oder zu reduzieren. Das Datenzielattribut wird der übergeordneten Komponente hinzugefügt, die die ID oder den Klassenselektor akzeptiert, dessen Wert die ID der untergeordneten Komponente ist. Um eine akkordeonartige Gruppe zu erstellen, verwenden Sie das Datenattribut data-parent=“#selector“ und der Wert des übergeordneten Datenattributs ist derselbe wie der Wert des Hauptcontainer-Div. Wir können das Element auch offen halten, indem wir die zusätzliche Klasse verwenden„In“.
Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
p{
border: 2px solid orange;
margin:10px 0px;
}
</style>
</head>
<body>
<div  >
<h2>Collapsible Accordion via Data Attributes</h2>
   <button type="button"   data-toggle="collapse" data-target="#demo-toggle">Click to expand and collapse</button>
   <div id="demo-toggle"  >
	<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
   </div>
</div>
</body>
</html>
  • Beispiel: Bootstrap Collapsible Accordion über Datenattribute ausführen

Beispiel für ein zusammenklappbares Bootstrap-Akkordeon über Datenattribute

Bootstrap Collapsible Accordion über JavaScript

Wir können das Element mithilfe von Bootstraps erweitern und reduzieren Zusammenbruch() Methode mit ID oder Klassenselektor im JavaScript-Code, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $(".btn").click(function(){
      $("#demo-toggle").collapse('toggle');
   });
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div  >
<h2>Collapsible Accordion via JavaScript</h2>
   <button type="button"  >Click to expand and collapse</button>
   <div id="demo-toggle"  >
	<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.  HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
   </div>
</div>
</body>
</html>
  • Führen Sie Bootstrap Collapsible Accordion über ein JavaScript-Beispiel aus

Bootstrap Collapsible Accordion über JavaScript-Beispiel

Optionen zum Zusammenklappen von Bootstrap

Es gibt bestimmte Optionen, die mit dem Bootstrap-Collap-Plugin verwendet werden können, wie in der folgenden Tabelle dargestellt:

Name Typ Standardwert Beschreibung

ElternteilWählerFALSCHWenn der Wert „Selektor“ ist, werden alle Elemente unter dem angegebenen übergeordneten Element geschlossen.
UmschaltenBoolescher WertWAHREs wird ausgelöst, wenn alle reduzierbaren Elemente umgeschaltet werden.

Bootstrap-Collapse-Methoden

Es gibt einige Methoden, die mit der Collapse-Klasse von Bootstrap verwendet werden, wie in der folgenden Tabelle gezeigt:

Methodenbeschreibung

.collapse(Optionen)Es aktiviert Inhalte als zusammenklappbares Element.
.collapse(‚toggle‘)Es schaltet das zusammenklappbare Element um, das entweder angezeigt oder ausgeblendet wird.
.collapse(’show‘)Es wird verwendet, um zusammenklappbare Elemente anzuzeigen.
.collapse(‚hide‘)Es wird verwendet, um zusammenklappbare Elemente zu verbergen.

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $("#toggle-false").click(function(){
      $("#demo-example").collapse({
      toggle:false
      });
   });
   $("#demo-show").click(function(){
      $("#demo-example").collapse('show');
   });
   $("#demo-hide").click(function(){
         $("#demo-example").collapse('hide');
   });
   $("#demo-toggle").click(function(){
         $("#demo-example").collapse('toggle');
   });
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div  >
<h2>Collapsible Accordion using Methods</h2>
   <button type="button"   id="toggle-false">Button False</button>
   <button type="button"   id="demo-show">Show Button</button>
   <button type="button"   id="demo-hide">Hide Button</button>
   <button type="button"   id="demo-toggle">Toggle Button</button>
   <div id="demo-example">
   	<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
   </div>
</div>
</body>
</html>
  • Führen Sie Bootstrap Collapsible Accordion mithilfe des Methodenbeispiels aus

Beispiel für Bootstrap Collapsible Accordion mit Methoden

Bootstrap-Collapse-Ereignisse

Es gibt einige Ereignisse, die mit dem Collapse-Plugin von Bootstrap verwendet werden, wie in der folgenden Tabelle gezeigt:

Eventbeschreibung

show.bs.collapseEs wird verwendet, wenn die Methode „Show-Instanz“ aufgerufen wird.
angezeigt.bs.collapseEs wird ausgelöst, wenn das Reduzierelement für den Benutzer sichtbar gemacht wurde.
hide.bs.collapseEs wird verwendet, wenn die Methode zum Ausblenden von Instanzen aufgerufen wurde.
versteckt.bs.collapseEs wird ausgelöst, wenn das Minimierungselement für den Benutzer verborgen ist.

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $('#demo-toggle').on('hidden.bs.collapse', function(){
      alert("The collapsed element has been hidden!!!");
   });
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div  >
<h2>Collapsible Accordion using Events</h2>
<button type="button"   data-toggle="collapse" data-target="#demo-toggle">Click to expand and collapse</button>
   <div id="demo-toggle"  >
	<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text, HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
   </div>
</div>
</body>
</html>
  • Führen Sie Bootstrap Collapsible Accordion anhand des Beispiels „Ereignisse“ aus

Bootstrap-zusammenklappbares Akkordeon anhand eines Beispiels für Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen