jQuery无法在Chrome中运行，并且在Safari和Firefox中无法正常运行

Question

Chrome 55.0，Firefox 50.1.0，Safari 10.0.2

Wordpress 4.7.1，Dynamik-Gen 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/构建一个手风琴。 上面的代码库中的代码可以在那里正常工作。 一旦放入WordPress / Dynamik中，它就不再按照Codepen起作用。

问题1：让它在所有浏览器上都能正常工作

问题2：删除滚动，因为它当前离开页面视图

非常感谢

Answer 1

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

  });

}) 

Answer 2

我会这样写：

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