10 сентября 2017 в 11:28
Подскажите, что делаю не так?
Drupal 7 + Тема на основе Bootstrap
Есть страница определенного типа материала. Вывожу список ссылок
<div id="accordion">
<div class="forms">
<ul>
<li><img alt="" class="img-responsive" src="" /> <strong>Название</strong> <a data-parent="#accordion" data-toggle="collapse" href="#id-блока">Название ссылки</a></li>
<li><img alt="" class="img-responsive" src="" /> <strong>Название</strong> <a data-parent="#accordion" data-toggle="collapse" href="#id-блока">Название ссылки</a></li>
<li><img alt="" class="img-responsive" src="" /> <strong>Название</strong> <a data-parent="#accordion" data-toggle="collapse" href="#id-блока">Название ссылки</a>
</ul>
</div>
<div id="#id-блока" class="collapse">Форма 1</div>
<div id="#id-блока" class="collapse">Форма 2</div>
<div id="#id-блока" class="collapse">Форма 3</div>
</div>
<div class="forms">
<ul>
<li><img alt="" class="img-responsive" src="" /> <strong>Название</strong> <a data-parent="#accordion" data-toggle="collapse" href="#id-блока">Название ссылки</a></li>
<li><img alt="" class="img-responsive" src="" /> <strong>Название</strong> <a data-parent="#accordion" data-toggle="collapse" href="#id-блока">Название ссылки</a></li>
<li><img alt="" class="img-responsive" src="" /> <strong>Название</strong> <a data-parent="#accordion" data-toggle="collapse" href="#id-блока">Название ссылки</a>
</ul>
</div>
<div id="#id-блока" class="collapse">Форма 1</div>
<div id="#id-блока" class="collapse">Форма 2</div>
<div id="#id-блока" class="collapse">Форма 3</div>
</div>
В том же регионе вывожу блоки с формами с id1,2,3,4,5,6,7 и т.д. со стилем .collapse
Далее использую скрипт
jQuery(function($) {
$(document).ready(function() {
$('#accordion').on('shown.bs.collapse', function () {
var panel = $(this).find('.in');
$('html, body').animate({
scrollTop: panel.offset().top
}, 500);
$(document).ready(function() {
$('#accordion').on('shown.bs.collapse', function () {
var panel = $(this).find('.in');
$('html, body').animate({
scrollTop: panel.offset().top
}, 500);
});
});
});
Цель: при клике по ссылке из списка отображение блока с формой с прокруткой к заголовку блока
Все работает в Firefox но не работает в Chrome.
Комментарии
Что говорит консоль хрома?
В консоли пусто. Без ошибок. jQuery 1.10. На голом html все срабатывает как нужно
Решение
Код Html
<ul>
<li>
<img alt="" class="img-responsive" src="" />
<strong>Название</strong>
<a class="button-to" href="#id-блока">Название ссылки</a>
</li>
<li>
<img alt="" class="img-responsive" src="" />
<strong>Название</strong>
<a class="button-to" href="#id-блока">Название ссылки</a>
</li>
<li>
<img alt="" class="img-responsive" src="" />
<strong>Название</strong>
<a class="button-to" href="#id-блока">Название ссылки</a>
</li>
</ul>
</div>
<div id="#id-блока" class="form-block">Форма 1</div>
<div id="#id-блока" class="form-block">Форма 2</div>
<div id="#id-блока" class="form-block">Форма 3</div>
Скрипт
$(".button-to").click(function() {
var form = $(this).attr("href");
$(form).toggle();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
});
});
});
Скрипт для Drupal
Drupal.behaviors.Forms = {
attach : function(context, settings) {
$(".button-to").click(function() {
var form = $(this).attr("href");
$(form).toggle();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
});
});
}
};
})(jQuery);
Блоки скрываем через CSS
display: none;
}