jQuery的不使用Chrome，而不是如預期在Safari和Firefox

Question

鉻55.0，火狐50.1.0，Safari瀏覽器10.0.2

的WordPress 4.7.1，Dynamik此根2.0

http://codepen.io/grantsmith/pen/WROPXr

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，它不再按照codepen工作。

問題1：得到它的工作在所有瀏覽器

問題2：刪除滾動，因爲它現在離開頁面視圖

非常感謝

Answer 1

我會寫這本方式：

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); 
     } 
    }); 
}); 

Answer 2

$(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); 
     } 

    }); 

})