Question

我正在尝试在列中的语义容器中使用砌体网格。我创造了一个简单的小提琴 here。由于它非常多，我不会发布所有内容，只是我认为会导致问题：

HTML

<div class="ui top attached buttons padded grid">
  <div data-bind="click: expander" class="ui column button groupheader center aligned">
    <i class="caret down icon"></i>
    <span> Group 1 </span>
  </div>
</div>
<div class="container-responsive expander hidden">
  <table class="ui compact celled unstackable table">
    <thead>
      <tr>
        <th class="seven wide">Key</th>
        <th class="seven wide right aligned">Value</th>
      </tr>
    </thead>
    ...
</div>

Knockoutjs

self.expander = function(group, event){
  var nextExpander = $(event.currentTarget).parent().next('.expander');
  if (nextExpander.is(':visible')){
    nextExpander.transition({
      animation: 'slide down',
      duration: 400,
      onHide: function () {
        $('#masonry-grid').masonry('layout');        
      }
    });
  }
  else{
    nextExpander.transition('slide down', 400);
    $('#masonry-grid').masonry();
  }
}

一旦用户点击了一个群组，它就会在语义转换过程中切换为可见或不可见＆＃39;向下滑动＆＃39;。问题是，一旦内容变为不可见，我在onComplete Handler砌体中告诉我再次进行布局。在两者的动画之后，语义库向下滑动＆＃39;和masonrys＆＃39; layout＆＃39;完成后菜单不再可见。它以某种方式移开了，也改变了它的尺寸。

为了解决问题，网格布局需要至少1350像素的宽度，否则它就像希望的那样工作。
另外如果masonrys的布局＆＃39;被禁用它按预期工作。
如果masonrys＆＃39;布局＆＃39;没有动画对组的更改动画也不会发生问题（只需单击最后一个组，您将看到）。

有人知道如何解决这个问题吗？

Answer 1

经过大量调试后，我只能复制Chrome中的特定错误。尝试将菜单项的z-index设置为auto（当前通过semantic.min.css设置为101）。

.ui.menu.fixed {
    z-index: auto !important;
}

垂直菜单与砌体的奇怪行为

1 个答案: