Intereting Posts
WordPress | Дата не всегда отображается Как показать только дочерние категории с помощью the_category (); Пользовательский тип сообщения не вытягивается в виджет Как принудительно применять определенный тип сообщения в цикле Создание формы поиска и отображение результатов Получить ссылку на вставленный медиафайл сообщения в цикле Гнездо Next и Previous в href с классом, который имеет фоновое изображение Удалить 100+ сообщений или медиафайлов из WordPress быстрее, чем по умолчанию? URL-адреса без изменений после миграции Запрос с двумя сообщениями и двумя разными мета-ключами Невозможно отредактировать мои объекты в неопределенном смещении Pagebuilder в файле base.php Возможность позволять пользователю публиковать собственные комментарии без замедления Регистр переднего регистра с настраиваемыми полями Получите что-то из таксономии Рассчитать налог на отпускную цену без учета скидки

Сброс начальной загрузки в пользовательском виджетах WordPress

Я создаю пользовательский виджет и использую Bootstrap 3 для стилизации. Я хочу реализовать аккордеон, увиденный здесь . Однако я не могу заставить его работать правильно. Я wp_enqueue_scripts transition.js, collapse.js и component-animations.scss в своих вызовах wp_enqueue_scripts и wp_enqueue_styles . Также я отменил регистрацию WP включенного jQuery и зарегистрировал версию, включенную в Bootstrap. Я либо получаю один из двух сценариев. Сценарий один ничего не работает. Все скрипты вызывается правильно и в правильном порядке согласно Chrome Dev Tools. Сценарий два – я могу заставить его работать, но только один раз. Я думаю, что это какой-то конфликт. Вот моя разметка: (Я сейчас не беспокоюсь о действительной функции виджета, просто пытаюсь заставить UI работать).

 <div class='ws-business-info accordion-group' id="ws-accordion"> <div class='panel panel-default'> <div class='panel-heading'> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#ws-accordion" href="#monday"> Monday </a> </h4> </div> <!-- panel title --> <div class='panel collapse in' id='monday'> <div class='panel-body'> <div class="col-xs-3"> <label for="<?php echo $this->get_field_id('mondayStart'); ?>">Open</label> <input class="form-control" type="text" id="<?php echo $this->get_field_id('mondayStart'); ?>" name="<?php echo $this->get_field_name('mondayStart'); ?>"/> </div> <div class='col-xs-3'> <label for="<?php echo $this->get_field_id('mondayEnd'); ?>">Close</label> <input class="form-control" type="text" id="<?php echo $this->get_field_id('mondayEnd'); ?>" name="<?php echo $this->get_field_name('mondayEnd'); ?>"/> </div> <div class='col-xs-3'> <label for="<?php echo $this->get_field_id('mondayEnd'); ?>"><p>Closed</p></label><br> <input class="form-control" type="checkbox" id="<?php echo $this->get_field_id('mondayClosed'); ?>" name="<?php echo $this->get_field_name('mondayClosed'); ?>"/> </div> </div><!-- panel body--> </div><!-- panel collapse --> </div> <!-- panel default --> 

Эта разметка повторяется для каждого дня недели. Вот сценарий одного javascript:

  $('.collapse').collapse(); 

и вот сценарий два javascript:

  $(document).ready(function() { $('.panel-title a').click(function() { $('.collapse').collapse('toggle'); }); });