Не работает скрипт jQuery на Mac Os

150

03 октября 2019, 21:20

Я написал код который должен динамично генерировать таблицу для навигации по контенту.

Вытянул все элементы h1 из блока content и присвоить им id(якорь).
Затем, используя эти h1(уже с id) я генерирую теги <а> которых указываю ссылки на заголовок(h1) и заполняю ими таблицу слева(Table of Contents).

Код: исходный код

jQuery(document).ready(function ($) {
    // ADD IDs
    var topics = jQuery('.content h1');
    topics.each(function(n) {
        $(this).attr("id", "anchor_" + n);
    });
    var anchors = jQuery('.content h1');

    //CREATE TABLE BLOCK
    jQuery('#table_contents').append(`
        <div class="table_inner">
            <p>Table of Contents <i class="fas fa-angle-down"></i></p>
            <div class="topics__anchors">
                <ul>
                </ul>
            </div>
        </div>
    `);
    anchors.each(function(n) {
        //console.log(jQuery(this).attr('id'));
         jQuery('.topics__anchors ul').append(`
             <li><a href="${"#"+jQuery(this).attr('id')  }">${(n+1)+". " + jQuery(this).text()}</a></li>
         `);

    });
    var anchorsBlock=jQuery('.topics__anchors');

    jQuery('.table_inner p').click(function () {
        if (!anchorsBlock.hasClass('active')){
            anchorsBlock.addClass('active');
            anchorsBlock.show();
        }else {
            anchorsBlock.removeClass('active');
            anchorsBlock.hide();
        }
    });

    //ANIMATE SCROLL
    var anchorsLinks=jQuery('.topics__anchors a');
    anchorsLinks.click(function (e) {
        anchorsLinks.removeClass('active');
        jQuery(this).addClass('active');
        console.log('You clicked a-tag   ' + e.target);
        var id  = $(this).attr('href'),
            top = $(id).offset().top;
        jQuery('body,html').animate({scrollTop: top}, 300);
    });

});

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

Проблема в том, что код работает хорошо на Windows и Linux, но если тестить на MacOS то ссылки не кликабельны(повсюду используется Chrome Browser). Потестить можно тут -> Пример кода В чем может быть проблема? Спасибо

Answer 1

Тема закрыта.

Нужно ссылкам прописать display:inline-block; Тогда на Маках все ок)

Answer 2

Проверьте Z-index ваших элементов в CSS если его нет то установите. И попробуйте снова сбросив кеш.

Еще можете попробовать сделать так

$('.topics__anchors a').on('click', function(){

        $(this).removeClass('active');
        jQuery(this).addClass('active');
        console.log('You clicked a-tag   ' + e.target);
        var id  = $(this).attr('href'),
            top = $(id).offset().top;
        jQuery('body,html').animate({scrollTop: top}, 300);

});

А лучше вот таким образом

$('#table_contents').on('.topics__anchors a', 'click', function(e){

        $(this).removeClass('active');
        jQuery(this).addClass('active');
        console.log('You clicked a-tag   ' + e.target);
        var id  = $(this).attr('href'),
            top = $(id).offset().top;
        jQuery('body,html').animate({scrollTop: top}, 300);

});