Форум

Pobedill · #1 (**permalink**) 13.02.2016, 18:04

Нужно чтобы ссылка-якорь открывала содержимое аккордеона в аккордеоне. В данном примере на #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>

рони · #2 (**permalink**) 13.02.2016, 21:54

Pobedill,
прежде чем опубликовать html, проверяйте структуру тегов

Pobedill · #3 (**permalink**) 13.02.2016, 22:28

Извините. Исправил.

рони · #4 (**permalink**) 14.02.2016, 00:57

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>

Pobedill · #5 (**permalink**) 14.02.2016, 05:52

рони,
Для #toggle-1.1 работает даже несмотря на точки в id. А если таких ссылок очень много (274) ?

рони · #6 (**permalink**) 14.02.2016, 09:13

Pobedill,
скрипт работает, несмотря на не корректный синтаксис, чего более?

Pobedill · #7 (**permalink**) 14.02.2016, 12:54

Дело в том, что скрипт раскрывает сразу пункт. А хотелось бы, чтобы по ссылке "URL#toggle-1.1". У меня прайс лист на сайте сделан аккордеоном, в нем 274 позиции, и я хочу бросать ссылки на одном форуме, чтоб они сразу вели на нужную позицию прайса. Скрипт с первого сообщения работает, но только для первого аккордеона (разделов прайса).

рони · #8 (**permalink**) 14.02.2016, 13:24

Pobedill,
не понимаю.

Pobedill · #9 (**permalink**) 14.02.2016, 14:46

Лучше посмотреть

Хочу чтобы переходя с любого сайта на мой сайт по ссылке-якорю, можно было перейти на конкретный пункт аккордеона.

Например с такой ссылки <a href="http://mysite.com/price#toggle-6.2.30">Облицовка стен керамической плиткой</a>

Находится эта вкладка в Отделочные работы=>Полы=>Облицовка стен керамической плиткой. То есть три аккордеона в одном.

рони · #10 (**permalink**) 14.02.2016, 15:11

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 поста отработал бы свою функцию ... эх....

Форум

Справочник

Discord чат

Курсы javascript