Question

这是一个非常烦人的错误，涉及隐藏和显示移动菜单的内容。我尝试了许多不同的方法，隐藏了内容，或者交替地将内容扔到左边：400％，但无论我在重新加载页面时经常尝试什么，一旦点击菜单图标，菜单“出现”根据chrome（它的所有类都设置正确）但它只是没有显示。它只发生在4次here.

中的1次

您每次都必须重新加载页面并点按绿色过滤器。您可以看到菜单应该如何工作，但它偶尔会消失。这个bug只发生在chrome上。它在ie，ff和safari上运行良好。这是一个引导站点，因此要查看移动菜单，请将浏览器缩小到＆lt; 767px。

HTML：

    <div class="row row-offcanvas row-offcanvas-left">
      <a id="filter-toggle" href="#" class="pull-left visible-xs">
        <img src="/assets/custom/images/filter-icon.png"/>
      </a>

      <div class="col-xs-4 col-sm-4 sidebar-offcanvas" id="sidebar" ng-controller="resourceCategoryCtrl">
        <a id="menu-toggle" href="#" class="pull-right visible-xs hidden-xs">
          <img src="/assets/custom/images/filter-icon.png"/>
        </a> 

        <h2 class="filter-heading">Categories</h2>

        <div class="list-group">
          <span data-toggle="offcanvas" class="visible-xs ng-cloak menu-shift"><a href="#" class="list-group-item resource-category rc-font" data-category-id="{{category.id}}" ng-repeat="category in categories" ng-click="toggleCategory()">{{category.title}}</a></span>

          <a href="#" class="list-group-item resource-category rc-font hidden-xs ng-cloak" data-category-id="{{category.id}}" ng-repeat="category in categories" ng-click="toggleCategory()">{{category.title}}</a>
        </div>
      </div><!--/.sidebar-offcanvas-->

      <div class="col-sm-6 col-sm-offset-2 col-md-7 col-md-offset-1" id="article" ng-controller="resourceCtrl">
        <h2 class="category-header font-category ng-cloak">{{category.title}}</h2>
        <div ng-show="resourceLoading" class="loading-gif">
          <div class="loading"></div>
        </div>

        <div class="resource-p" ng-show="!resourceLoading" ng-repeat="resource in resources">
          <resource></resource>
        </div>
        <p ng-show="noResults" class="no-results ng-cloak">No results found.</p>

        <div class="text-center" ng-show="totalItems > itemsPerPage && !resourceLoading">
          <pagination max-size="maxSize" num-pages="numPages" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" boundary-links="false" rotate="true"></pagination>
        </div>
    </div><!-- .row --> 

  </div><!-- .container --> 
  <div class="push"></div>
</section>

<footer class="footer bg-dark">
     <div class="text-center">
      <a href="tos.html" class="tos-title">Terms of Service</a>
    </div>
</footer>

JQuery的：

$(document).ready(function () {
  $('.filter-toggle').on('click', function () {
    $('.row-offcanvas').toggleClass('active');
    $('.sidebar-offcanvas').toggleClass('extend');
    $('#article').toggleClass('hide');
    $('footer').toggleClass('hide');
    $('#menu-toggle').toggleClass('hidden-xs');
    $('#filter-toggle').toggleClass('hidden-xs');

  });
  $('#menu-toggle').on('click', function () {
    $('.sidebar-offcanvas').toggleClass('extend');
    $('.row-offcanvas').toggleClass('active');
    $('#menu-toggle').toggleClass('hidden-xs');
    $('#filter-toggle').toggleClass('hidden-xs');
    $('#article').toggleClass('hide');
    $('footer').toggleClass('hide');
  });
  $('.menu-shift').on('click', function () {
    $('.sidebar-offcanvas').toggleClass('extend');
    $('.row-offcanvas').toggleClass('active');
    $('#menu-toggle').toggleClass('hidden-xs');
    $('#filter-toggle').toggleClass('hidden-xs');
    $('#article').toggleClass('hide');
    $('footer').toggleClass('hide');
  });
});

CSS：

  .extend {
    width: 100%;
  }

  .row-offcanvas-left {
    left: 0;
  }

 .row-offcanvas-left.active {
   left: 50%;
 }

Chrome渲染显示的内容缺失

0 个答案: