Загрузка события при изменении URL - PullRequest
Новая
       7

Загрузка события при изменении URL

0 голосов
/ 13 июня 2018

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

Например, у меня есть страница с кучей аккордеонов, перечисленных по вертикали, и да, я знаю о возможности дать им идентификаторы, и в URL-адресе страница # accordion1 откроет ее и прокрутит именно там.Итак, какого рода JS мне здесь не хватает, чтобы при загрузке # accordion1 автоматически нажимался определенный путь URL?

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Итак, это сработало ... поэтому, если URL-адрес нацелен на какой-либо элемент с идентификатором, он будет прокручивать до него и делать что-то.В этом случае откроется гармошка (добавьте и удалите класс) 

(function($){
$(window).load(function(){
var et_hash = window.location.hash;
if(window.location.hash) {
$( '.et_pb_toggle' + et_hash )
.removeClass('et_pb_toggle_close')
.addClass('et_pb_toggle_open')
}
});
})(jQuery)

document.addEventListener('DOMContentLoaded', function(event){ 

    if (window.location.hash) {
        // Start at top of page
        window.scrollTo(0, 0);

        // Prevent default scroll to anchor by hiding the target element
        var db_hash_elem = document.getElementById(window.location.hash.substring(1));
        window.db_location_hash_style = db_hash_elem.style.display;
        db_hash_elem.style.display = 'none';

        // After a short delay, display the element and scroll to it
        jQuery(function($){
            setTimeout(function(){
                $(window.location.hash).css('display', window.db_location_hash_style);
                et_pb_smooth_scroll($(window.location.hash), false, 800);
            }, 700);
        });     
    }
});
0 голосов
/ 13 июня 2018

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

Затем мы извлекаем хеш из URL, чтобы мы могли проверить, соответствует ли он тому, что мы хотим.Кроме того, мы используем оператор switch для проверки известных значений, поскольку мы не можем доверять никаким входным данным.

Мы находим соответствующий аккордеон по его идентификатору, который, если в вашем коде нет, вам нужно будет добавить. 

// Trigger when the whole document loads
window.onload = function(){
    // Grab the hash out of the URL
    switch(window.location.hash){
        case "#accordion1":
            // Click the relevant item located by its ID
            document.getElementById("accordion1ID").click();
            break;
        case "#accordion2":
            document.getElementById("accordion2ID").click();
            break;
    }
}
...