Поиск

Ссылка в заголовке UI Accordion

Итак, есть аккордеон, все вкладки закрыты, если в заголовок вставить ссылку на другую страницу, то она по своему назначению работать не будет т.к. клик по ней открывает и закрывает вкладку.

<div class="accordion">
	<h3><a href="https://example.com">Ссылка 1</a></h3>
	<div>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
	</div>

	<h3><a href="https://example.com">Ссылка 2</a></h3>
	<div>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
	</div>

	<h3><a href="https://example.com">Ссылка 3</a></h3>
	<div>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
	</div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script>
$(function() {
	$(".accordion").accordion({
		active: true,
		collapsible: true
	});
});
</script>
HTML
.accordion .ui-accordion-header {
	margin: 0 0 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	background: #eee;
	cursor: pointer;
	outline: none;
}
.accordion .ui-accordion-content {
	margin: 0 0 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	background: #fff;
}
CSS

Как видно переход по ссылке не сущевстляеется

Следующий код сделает ссылку активной, после того как аккордеон будет открыт, т.е. ссылка сработает на второй клик. Используется событие activate, которое срабатывает после активации панели.

$(function() {
	$(".accordion").accordion({
		active: true,
		activate: function(event, ui ) {
			$(ui.newHeader).on('click', "a", function(event) { 
				window.location.href = $(this).attr("href"); 
			});                
		}
	});
});
JS
05.07.2019, обновлено 16.10.2019 315

Темы

#jQuery #jQuery UI

Другие публикации

Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019 485
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по...
02.07.2019 3254
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
03.07.2019 738
Пример горизонтального меню для лэндингов, в котором реализовано...
19.12.2018 1513
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
06.11.2017 8569
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
08.02.2018 3925