javascript - Jquery .hide() 和 .show() 在 Firefox 上运行速度变慢，但在 chrome 上运行良好

Question

我制作了一棵包含子元素的树，为了隐藏并在用户单击时显示它们，我使用 .show('fast') 和 .hide('fast') jquery 函数。 但我注意到，在 Firefox 上，两种状态之间的转换速度正在减慢，但在 Chrome 上，它就像一个魅力。

我有最新版本的 Firefox。

您还应该知道我在网站中使用了不同的库，例如 bootstrap 、 datatable.js 。我之所以告诉你，是因为我发现 codepen.io 上的速度下降不如我的网站上明显。

this is the codepen.io with my tree

这是我的 JavaScript 代码:

$('.tree li.parent_li > span').on('click', function(e) {
    var child = $(this).parent('li.parent_li').find(' > ul > li');
    if (child.is(":visible")) {
        child.hide('fast');
        $(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
    } else {
        child.show('fast');
        $(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
    }
    e.preventDefault();
    e.stopPropagation();
});

谢谢。

Answer 1

这是我的尝试:

$(function(){
  $('.tree li.parent_li > span').on('click', function(e) {
    var parent = $(this).closest('li.parent_li');
    parent.toggleClass("open");
    e.preventDefault();
    e.stopPropagation();
  });
});

.administrationRowTab {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.tab-pane,
.active {
  color: inherit;
}


/*TREE STYLE*/

.tree ul {
  list-style: none;
}

.tree .parent_li > span {
  cursor: pointer;
}

.tree i {
  margin-right: 5px;
}

.parent_li .glyphicon-chevron-down,
.parent_li.open .glyphicon-chevron-right {
  display: none;
}

.parent_li.open .glyphicon-chevron-down {
  display: inline-block;
}

.parent_li ul {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
}

.parent_li.open ul {
  height: 60px;
  overflow: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row m-t-25">
  <div class="container">
    <div class="row administrationRowTab">
      <ul id="tabUl" class="nav nav-tabs">
        <li class="active"><a href="#tabBuildConfiguration" data-toggle="tab" aria-expanded="true">Test</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
          <div class="row pad-10">
            <div class="tree">
              <ul>
                <li class="parent_li">
                  <span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 1</span>
                  <ul>
                    <li><i class="glyphicon glyphicon-file"></i>Child 1</li>
                    <li><i class="glyphicon glyphicon-file"></i>Child 2</li>
                    <li><i class="glyphicon glyphicon-file"></i>Child 3</li>
                  </ul>
                </li>
                <li class="parent_li">
                  <span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 2</span>
                  <ul>
                    <li><i class="glyphicon glyphicon-file"></i>Child 1</li>
                    <li><i class="glyphicon glyphicon-file"></i>Child 2</li>
                    <li><i class="glyphicon glyphicon-file"></i>Child 3</li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>