Эта статья в основном узнает о подключателе JavaScript - Folding.
1. Эффект перехода
О последствиях перехода
Для простых эффектов перехода просто введите Transition.js и другие файлы JS вместе. Если вы используете скомпилированный (или сжатый) файл bootstrap.js, вам не нужно вводить его отдельно.
Что внутри
Transition.js является основным помощником для события TransitionEnd, а также является моделированием эффектов перехода CSS. Он используется другими плагинами для определения того, поддерживает ли текущий браузер эффекты перехода CSS.
2. Склад
Дайте базовый стиль и гибкую поддержку компонентам, которые поддерживают функции складывания, такие как акрологии и навигация.
Зависимости плагинов
Плагин коллапса зависит от плагина эффекта перехода.
Случай
Используя складной плагин, простой компонент Acron создается путем расширения компонента панели.
Давайте сначала посмотрим на эффект.
Далее, давайте посмотрим на реализацию кода.
<div style = "margin-top: 140px;"> <div id = "accordion"> <div> <div> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#accorcdion" href = "#collapseone"> collpsible item </t hree nepase nму Cliche Drreeshenderit, Enim eiusmod Высокая жизнь обвиняемого Терри Ричардсона ad Quid. 3 Wolf Moon Officeaute, Non Cupidat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы случаются крафтовое пиво с фермы до стола, сырой джинсовой эстетический синтезатор. </div> </div> </div> <div> <h4> <a data-toggle = "collapsse" data-toggle = "collapsse" data-parent = "#accordion" href = "#collapsetwo"> countable group#2 </a> </h4> </div> <div> antry-pariatur cliche cliche-cliche-cliche, in acriemus e-in-pariaturit, in acriemus gishum Ричардсон AD Squid. 3 Wolf Moon Officeaute, не купидатат скейтборд Долор Бранч. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы случаются крафтовое пиво с фермы до стола, сырой джинсовой эстетический синтезатор. </div> </div> </div> <div> <h4> <a data-toggle = "collapsse" data-toggle = "collapsse" data-parent = "#accordion" href = "#collapsethree"> countable группы#3 </a> </h4> </div> <div id = collapsethree inemium re-re-re-re-re-re-re-re-re-re-retr Аксус Терри Ричардсон Ad Squid. 3 Wolf Moon Official Aute Aute, Non Cupidatat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггингс Occucaecat Craft Beer Farm-Toble, сырой джинсовый эстетический синтезированный синтезатор Nesciunt Вы, вероятно, не слышали о том, что они обвиняют устойчивые VHS. </div> </div> </div> </div> </div> </div>
Шаг 1: Во-первых, самый внешний слой группы панелей включает в себя несколько групп ниже.
Шаг 2: Посмотрите на некоторые простые группы
<div> <h4> <a data-toggle = "collapsse" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseone"> Колопленная группа#1 </a> </h4> </div> <div id = "collapseone"> <div> </div> </div> <div = "collapseone"
Структура панели можно четко увидеть через код.
Управление панели и кузовов, а затем заголовок панели может содержать заголовки и ссылки. Подключитесь с панелью-телом через ссылку.
Шаг 3: Вы можете обнаружить, что в группе панели есть id = "аккордеон", а затем в ссылке есть данные Data-parent = "#accordion" под каждым заголовком ниже.
В случае удаления эффект состоит в том, что после нажатия на другие ссылки исходная панель больше не будет сокращаться.
Вы можете показать эффект складывания по -другому.
<div style = "margin-top: 140px;"> <button type = "button" data-toggle = "collapse" data-target = "#demo"> простой коллапс </button> <div id = "demo"> Anim Pariatur Cliche Drrehenderit, Enim Eiusmod Accusamus Terry Richardson Ad. 3 Wolf Moon Official Aute Aute, Non Cupidat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы случайно-пиво
Использование
Плагин сгиба управляет стилями через несколько простых классов
.collapse скрыть контент
.collapse in Show Content
.collapssing. Он добавляется, когда переход запускается и удаляется, когда он закончит, вероятно, означает, что эффект перехода будет доступен после добавления сгиба, а затем, если он будет удален, он закончится.
Через атрибут данных
Просто добавление Data-toggle = "Couplapse" и направленность на данные в элемент страницы дает ему возможность управлять элементами складных страниц. Свойство Target Data принимает селектор CSS в качестве объекта управления. Обязательно добавьте класс коллапса в рухнувший элемент страницы. Если вы хотите, чтобы состояние по умолчанию было расширено, добавить в класс.
Чтобы добавить контроллер в набор складных элементов страницы, добавьте data-parent = "#selector". Пожалуйста, обратитесь к приведению выше.
через JavaScript
<button Type = "button" onclick = "open ()"> open </button> <button type = "button" onclick = "hide ()"> fold </button> <div id = "demo"> Anim pariatur cliche, dreshenderit, enim eiusmod accusamus terry Richardson ad squid. 3 Wolf Moon Official Aute Aute, Non Cupidat Skateboard Dolor Brunch. Food Truck Quinoa nesciunt laborum eiusmod. Бранч 3 Волф-Луна Верхне, Sunt Aliqua положила на нее птицу с однооригеновым кофе Nulla Assumenda Shoreditch et. Nihil anim keffiyeh helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente EA Ad Vegan Excepteur Butcher Vice Lomo. Леггинсы Occucaecat Craft Beer Farm-Toble, сырой джинсовой эстетический синтезированный синтезатор.
<script type = "text/javascript"> $ (function () {$ ("#demo"). Collapsse ({toggle: false})}) function open () {$ ("#demo"). Collapsse ("show"); } function hide () {$ ("#demo"). COLLAPSE ("hide"); } </script>Взгляните на вышеупомянутый эффект
метод
Дайте элементы страницы складную функцию. Принимает дополнительный объект в качестве аргумента.
$ ("#demo"). коллапс ({toggle: false})
Таким образом, элементы будут расширены при инициативе.
1. Collapsse ('Toggle') отображает или скрывает складной элемент страницы.
2.collapse ('show') Отображает складной элемент страницы.
3.collapse ('Hide') скрывает складной элемент страницы.
событие
Плагин с коллапс в начальной загрузке раскрывает набор событий, которые можно слушать.
Это связывает скрытые события с элементом.
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.