jquery - Safari上的jQuery手风琴问题

Question

我有一个非常简单的使用 jQuery slideUp/构建的手风琴slideDown。它在 Chrome/Firefox 中运行良好，但我在 Safari 中遇到了一个奇怪的 flash 问题。它主要发生在您从手风琴底部开始并单击向上的项目时。

具体来说，如果您打开和关闭每个选项卡，似乎没有问题，但是当“许可”打开时，您单击它们向上，您会看到闪烁。

我尝试了许多不同的解决方案，似乎无法解决仅 Safari 的问题。我该如何解决？

// accordian functionality
$('.contact-item').on('click', function() {

  // Check if this is already active
  if ($(this).hasClass('active')) {
    // Slide up panel, remove class
    $(this).find('.contact-info').slideUp(250);
    $(this).removeClass('active');

  } else {
    // Slide up any open panel
    // Remove active class from any open service panel
    $('.contact-info').slideUp(250);
    $('.contact-item').removeClass('active');

    // Open accordian panel
    // Add class to active item
    $(this).find('.contact-info').slideDown(250);
    $(this).addClass('active');
  }

});

.contact-content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: grey;
}

.contact-list {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 310px;
  color: white;
}

.contact-list .contact-item {
  border-bottom: 1px solid black;
  cursor: pointer;
}

.contact-list h2 {
  color: black;
  letter-spacing: 4px;
  text-transform: uppercase;
  width: 100%;
  text-align: left;
  font-family: arial;
  letter-spacing: 4px;
  font-weight: lighter;
  font-size: 13px;
  padding: 16px 0;
  background: transparent;
  font-weight: 200;
  border: none;
  display: block;
  position: relative;
  margin: 0;
}

.contact-list .contact-info {
  display: none;
  color: black;
  font-size: 12px;
  text-transform: uppercase;
  font-family: arial;
  letter-spacing: 1px;
  font-weight: 200;
  padding: 0 10px 10px;
}

.contact-list .contact-info p {
  margin: 0;
  line-height: 1.3;
  font-weight: 300;
}

.contact-list .contact-info a {
  display: block;
  text-decoration: none;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-content">

  <div class="contact-list">

    <div class="contact-item">
      <h2 class="contact-title">Management</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:[e-mail]" class="contact-link">[e-mail]</a>
      </div>
    </div>

    <div class="contact-item">
      <h2 class="contact-title">Publicity</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:[e-mail]" class="contact-link">[e-mail]</a>
      </div>
    </div>

    <div class="contact-item">
      <h2 class="contact-title">Booking</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:[e-mail]" class="contact-link">[e-mail]</a>
      </div>
    </div>

    <div class="contact-item">
      <h2 class="contact-title">Licensing</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:[e-mail]" class="contact-link">[e-mail]</a>
      </div>
    </div>

  </div>
</div>

在 Codepen 上查看

标签： jquerysafarislideup