Question

在IE11中这种布局是否可以远程进行（非常粗糙的示例）？

$(document).on('click', '.js-toggle-hide', function(e){
  e.preventDefault();
  $(this).parent().parent().find('.js-hide').toggle();
});

@charset "UTF-8";
.c-sidebar {
  display: grid;
  grid-template-columns: 120px auto;
  outline: 1px solid #ccc;
  overflow: auto;
}

.c-cat {
  display: grid;
  grid-template-columns: 120px auto;
  grid-template-rows: auto;
}
.c-cat__name {
  grid-row: 1 / 1000;
}
.c-cat__toggle {
  grid-row: 1 / 999;
  min-width: 120px;
}
.c-cat__subcat {
  grid-column: 3 / 4;
  min-width: 120px;
}
.c-cat__subcat--all {
  grid-column: 2 / 4;
}

/* decoration */
body {
  padding: 15px;
  background: #eee;
  font-size: 11px;
}

.c-cell {
  background: #fff;
  outline: 1px solid #ccc;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-sidebar">
    <div class="c-cell">All Categories</div>
    <div>
      <div class="c-cat">
        <div class="c-cat__name  c-cell">Sales</div>
        <div class="c-cat__toggle  c-cell">
          <a href="" class="js-toggle-hide">All items</a>
        </div>
        <div class="c-cat__subcat  c-cell  js-hide">Export sales</div>
        <div class="c-cat__subcat  c-cell  js-hide">Other sales</div>
        <div class="c-cat__subcat  c-cell  js-hide">Product sales</div>
        <div class="c-cat__subcat--all  c-cell  js-hide"><b>All items</b></div>
      </div>
    </div>
  </div>

请注意，右列中的项目数未定义（销售类型），客户可以添加/删除它们。

有我不知道的CSS技巧吗？

另一种选择是使用带有复杂js / jquery代码的表（这只是代码的一部分，但这完全代表了我的困境），这将是非常繁琐的工作。

Answer 1

我的建议是，如果您想成为网格现代者并且仍然支持IE11之类的东西。...然后从this.state = { resolutionOptions: [ { text: 'All', id: 0, value: 'all' }, { text: 'Month', id: 1, value: 'Monthly' }, { text: 'Day', id: 2, value: 'day' }, { text: 'Day-Hour', id: 3, value: 'Day-Hour' }, { text: 'Hourly (0-23)', id: 4, value: 'hourly' }, { text: 'Day of Week', id: 5, value: 'dow' } ] } componentWillMount() { this.updateResolutionText() } componentDidUpdate() { // this returns correctly {text: 'Machines', id: 0, value: 'all'} console.log(this.state.resolutionOptions[0]); } updateResolutionText() { let basisList = [ {text: 'Users (ID)', id: 0, value: 'users'}, {text: 'Machines', id: 1, value: 'machines'} ]; let options = this.state.resolutionOptions; let comparison = 'users'; if(basisList) { for(let i = 0; i < basisList.length; i++) { if(basisList[i].value === comparison) { options[0].text = basisList[i].text break; } } } this.setState({ resolutionOptions: options }); } <Select2 className="form-control" ref="resolution" data={this.state.resolutionOptions} defaultValue={0}>开始，然后做一个媒体支持来添加网格，如下所示：

display: flex

因此，您可以在此处添加所有网格...。如果执行此操作，则不必重复，您只需要在此处执行网格部分（网格模板，列，行等）并绕过任何其他样式，例如颜色，字体，px等...

IE11和CSS网格

1 个答案: