Проверка родительских чекбоксов и их раскрытие
Нужно чтобы ссылка-якорь открывала содержимое аккордеона в аккордеоне. В данном примере на #toggle-1.1. Можно ли как-то делать проверку родительских чекбоксов и открывать их? Скрипт приведенный ниже открывает по якорю только первый аккордеон. Очень нужно для входящих ссылок и продвижения ссылаться конкретно на пункт аккордеона.
<ul class="accordion">
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-1">Заголовок 1</label>
<input type="checkbox" class="accordion_toggle" id="toggle-1" />
<div class="accordion_target">
<ul class="accordion">
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-1.1">Заголовок 1.1</label>
<input type="checkbox" class="accordion_toggle" id="toggle-1.1" />
<div class="accordion_target">
<p>
Текст
</p>
</div>
</li>
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-1.2">Заголовок 1.2</label>
<input type="checkbox" class="accordion_toggle" id="toggle-1.2" />
<div class="accordion_target">
<p>
Текст
</p>
</div>
</li>
</ul>
</div>
</li>
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-2">Заголовок 2</label>
<input type="checkbox" class="accordion_toggle" id="toggle-2" />
<div class="accordion_target">
<p>
Текст
</p>
</div>
</li>
</ul>
<script>
window.addEventListener('load', function() {
location.hash && (document.querySelector(location.hash).checked = true)
});
</script>
|
Pobedill,
прежде чем опубликовать html, проверяйте структуру тегов :( |
Извините. Исправил.
|
Pobedill,
на всякий случай точка недопустимый символ в id ... и строка 50 только для теста
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<ul class="accordion">
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-1">Заголовок 1</label>
<input type="checkbox" class="accordion_toggle" id="toggle-1" />
<div class="accordion_target">
<ul class="accordion">
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-1.1">Заголовок 1.1</label>
<input type="checkbox" class="accordion_toggle" id="toggle-1.1" />
<div class="accordion_target">
<p>
Текст
</p>
</div>
</li>
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-1.2">Заголовок 1.2</label>
<input type="checkbox" class="accordion_toggle" id="toggle-1.2" />
<div class="accordion_target">
<p>
Текст
</p>
</div>
</li>
</ul>
</div>
</li>
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-2">Заголовок 2</label>
<input type="checkbox" class="accordion_toggle" id="toggle-2" />
<div class="accordion_target">
<p>
Текст
</p>
</div>
</li>
</ul>
<script>
window.addEventListener("load", function() {
var a = "#toggle-1.1"
//var a = location.hash;
a && (a = a.slice(1).split(".").reduce(function(b, a) {
b = b ? b + "." + a : a;
document.querySelector('[id="' + b + '"]').checked = !0;
return b
}, ""))
});
</script>
</body>
</html>
|
рони,
Для #toggle-1.1 работает даже несмотря на точки в id. А если таких ссылок очень много (274) ? :) |
Pobedill,
скрипт работает, несмотря на не корректный синтаксис, чего более? |
Дело в том, что скрипт раскрывает сразу пункт. А хотелось бы, чтобы по ссылке "URL#toggle-1.1". У меня прайс лист на сайте сделан аккордеоном, в нем 274 позиции, и я хочу бросать ссылки на одном форуме, чтоб они сразу вели на нужную позицию прайса. Скрипт с первого сообщения работает, но только для первого аккордеона (разделов прайса).
|
Pobedill,
не понимаю. |
Лучше посмотреть
Хочу чтобы переходя с любого сайта на мой сайт по ссылке-якорю, можно было перейти на конкретный пункт аккордеона. Например с такой ссылки <a href="http://mysite.com/price#toggle-6.2.30">Облицовка стен керамической плиткой</a> Находится эта вкладка в Отделочные работы=>Полы=>Облицовка стен керамической плиткой. То есть три аккордеона в одном. |
Pobedill,
да хоть 10 вложений, скрипт отработает как надо. 2 скрипта убрать снизу что ставили ранее заменить на это
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = location.hash;
a && (a = a.slice(1).split(".").reduce(function(b, a) {
b = b ? b + "." + a : a;
document.querySelector('[id="' + b + '"]').checked = !0;
var c = document.querySelector('[id="' + b + '"]').previousElementSibling;
c && c.scrollIntoView();
return b
}, ""))
});
</script>
в строке 36 нафига круглые скобки ? убрать ... научится пользоваться консолью и править ошибки ... без них и в первой редакции скрипт из 4 поста отработал бы свою функцию ... эх.... |
| Часовой пояс GMT +3, время: 03:38. |