Jquery не работает в Chrome, а не как ожидается, в Safari и Firefox

Chrome 55,0, Firefox 50.1.0, Safari 10.0.2Jquery не работает в Chrome, а не как ожидается, в Safari и Firefox

Wordpress 4.7.1, Dynamik-Gen 2,0

HTML

<article class="accordion"> 
<section> 
    <header><h5>When will I get my race pack with number and timing chip?</h5></header> 
    <div class="accord-content"><p>You will get your race pack in the post around 2 weeks before the race.</p> 
    </div> 
</section> 
<section> 
    <header><h5>Is the course totally closed to traffic?</h5></header> 
    <div class="accord-content"><p>Yes, the Course is completely closed roads, so no cars or pedestrians will be allowed on the run course. The town centre finish will be fenced from Regents circus right down to the finish line. There will be ample space on both sides of the fenced area for spectators and pedestrians on both sides.</p> 
    </div> 
</section>

CSS

.accordion { 
    margin: 0 auto; 
} 
.accordion header { 
    cursor:pointer; 
    background: #004B92; 
    padding: 18px; 
    border-bottom: 1px solid #00256C; 
    transition: background 1.0s ease-in-out; 
    -moz-transition: background 1.0s ease-in-out; 
    -webkit-transition: background 1.0s ease-in-out; 
} 
.accordion header h5 { 
    font-weight: 300!important; 
    font-size: 1.8rem!important; 
    color: white!important; 
    text-align: center; 
    margin-bottom: 0!important; 
} 
.accordion .accord-content { 
    display: none; 
    width:100%; 
    color: #00256C; 
    background-color: #fff; 
    box-sizing: border-box; 
} 
.accord-content p { 
    text-align: center; 
    padding:18px; 
} 
.accord-content .selected h5 { 
    background: #00256C; 
} 
.accordion h5:after { 
content: '\002B'; 
color: #fff; 
font-weight: bold; 
float: right; 
margin: 0 5px; 
} 
.accordion .selected h5:after { 
    content: "\2212"; 
}

JQuery:

jQuery(document).ready (function($) { 
    // run the accordion 
    var allPanels = $('.accord-content').hide(); 
    var heads = $('.accordion header'); 
    $('header').on('click', function() { 
     $this = $(this); 
     $target = $this.parent().find('div'); 
     if(!$target.hasClass('active')){ 
     heads.removeClass('selected'); 
     $(this).addClass('selected'); 
     allPanels.removeClass('active').slideUp(); 
     $target.addClass('active').slideDown(); 
     $('html, body').animate({scrollTop: $($target).offset().top}, 50); 
     } 

    }); 

}) (jQuery);

Привет, следует отметить, что я ничего не знаю о Jquery, так как, скорее всего, станет совершенно очевидно!

Я пытаюсь построить аккордеон для страницы WordPress, http://www.newswindonhalf.co.uk/half-marathon/faqs/. Код выше в codepen отлично работает, пока он есть. После того, как вы разместили его в WordPress/Dynamik, он больше не работает в кодедене.

Выпуск 1: Получить это работает на всех браузерах

Выпуск 2: Удалите прокруткой, как это в настоящее время оставляет вид страницы

Большое спасибо

источник

2017-01-24 Grant Smith

Какие ошибки вы получаете в консоли браузера? – j08691

Я написал бы это путь:

jQuery(document).ready(function() { 
    // run the accordion 
    var allPanels = jQuery('.accord-content').hide(); 
    var heads = jQuery('.accordion header'); 
    jQuery(heads).on('click', function() { 
     $this = jQuery(this); 
     $target = $this.parent().find('div.accord-content'); 
     if(!$target.hasClass('active')){ 
      heads.removeClass('selected'); 
      $this.addClass('selected'); 
      allPanels.removeClass('active').slideUp(); 
      $target.addClass('active').slideDown(); 
      jQuery('html, body').animate({scrollTop: $target.offset().top}, 50); 
     } 
    }); 
});

источник

2017-01-24 15:08:21 MikeS

Спасибо, но я получаю следующую ошибку в консоли. Uncaught TypeError: Невозможно прочитать свойство 'style' из null в HTMLElement.acc. (Анонимная функция) .onclick (http://www.newswindonhalf.co.uk/wp-content/uploads/dynamik-gen/theme/custom- scripts.js вер = 1.9.9: 8: 26). Из того небольшого знания, которое у меня есть, вам не нужно объявлять, что вы используете JQuery с wordpress? –

Извините, я пропустил, что вы использовали Wordpress. Вы правы, вы используете jQuery вместо $. Я отредактирую свой ответ. – MikeS

такая же ошибка, как указано выше? спасибо за помощь, хотя ... –

$(document).ready (function() { 
    // run the accordion 
    var allPanels = $('.accord-content').hide(); 
    var heads = $('.accordion header'); 
    $('header').on('click', function() { 
     $this = $(this); 
     $target = $this.parent().find('div'); 
     if(!$target.hasClass('active')){ 
     heads.removeClass('selected'); 
     $(this).addClass('selected'); 
     allPanels.removeClass('active').slideUp(); 
     $target.addClass('active').slideDown(); 
     $('html, body').animate({scrollTop: $($target).offset().top}, 50); 
     } 

    }); 

})

источник

2017-01-24 15:07:19

Jquery не работает в Chrome, а не как ожидается, в Safari и Firefox

ответ

Смежные вопросы