时间戳

首页 > 解决方案 > JQuery 3.3.0 slideDown() Mobile Jumpback to display none

javascript - JQuery 3.3.0 slideDown() Mobile Jumpback to display none

问题描述

我有以下 JQ 代码

var $body = $('body'),
  $accordion = $body.find('[data-accordion]'),
  $heading = $accordion.find('[data-accordion="heading"]'),
  $content = $accordion.find('[data-accordion="content"]');

$heading.click(function(e) {

  if (!($(this).hasClass('open'))) {
    $(this).addClass('open');
    $(this).next().slideDown(300);
  } else {
    $(this).removeClass('open');
    $(this).next().slideUp(300);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>

<body>
  <div class="accordion" data-tabs="" data-accordion="">
    <div class="accordion--inner">
      <div class="accordion--headline open" data-accordion="heading"><span>Status</span></div>
      <div class="accordion--content" data-accordion="content" style="display: none;">
        <ul class="list--clear">
          <li class="search-filter-subcontent__element" itemprop="name">
            <input class="form__field--checkbox" id="checkbox7" type="checkbox" value="">
            <label class="form__field--label" for="checkbox7"><span>Checkbox</span></label>
          </li>
          <li class="search-filter-subcontent__element" itemprop="name">
            <input class="form__field--checkbox" id="checkbox8" type="checkbox" value="">
            <label class="form__field--label" for="checkbox8"><span>Checkbox</span></label>
          </li>
          <li class="search-filter-subcontent__element" itemprop="name">
            <input class="form__field--checkbox" id="checkbox9" type="checkbox" value="">
            <label class="form__field--label" for="checkbox9"><span>Checkbox</span></label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

在桌面上一切都很好，但是如果我在移动设备上或使用 chrome 开发工具进行测试，下拉菜单会向下滑动，当它完成时，内联显示样式会跳回显示：无。我真的不知道该怎么办。

标签： javascriptjqueryhtml

解决方案

推荐阅读