Intereting Posts
Использование файла за пределами иерархии шаблонов для проверки подлинности в Twitter Самый простой способ аутентификации пользователей WP с использованием внешней БД? защита паролем отдельных страниц Правильный способ добавления таксономии к пользовательскому типу сообщения Доступ к изображениям с измененным размером, сгенерированным `add_image_size ()` Пользовательские типы сообщений в меню навигации WordPress Лучший плагин для большинства просмотров Как добавить несколько элементов флажка в мультимедийные вложения? Медленные запросы Mysql Изменение имени виджета боковой панели Форум Open Source для WordPress, аналогичный stackexchange или stackoverflow как использовать слайд-шоу Skylark в витрине? Порядок URL для разбивки на страницы Создание динамических файлов верхнего и нижнего колонтитулов Заголовок страницы фильтра (отображается на вкладке браузера) wp-login

Сброс начальной загрузки в пользовательском виджетах 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'); }); });