Question

Chrome 55.0，Firefox 50.1.0，Safari 10.0.2

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，它就不再像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);
      }
  });
});

Jquery无法在Chrome中运行，而且在Safari和Firefox中没有预期的效果

2 个答案: