环境：电子桌面单页应用
我有一个项目，我想使用两个Semantic UI侧边栏计划。一次只能看到一个方案。我已经看过这个早期的问题（Semantic-UI: Two Sidebars Conflict, Only One at a Time?），但它只是部分回答了我的问题。
做一个简单的测试，将每个侧边栏方案包裹在div中，我有一些Semantic UI警告（“必须移动侧边栏。为了获得最佳性能，请确保侧边栏和推杆是您身体标签的直接子项”）。在我走得更远之前，有人能告诉我下面的结构是否有效或是否有其他推荐的方法可以解决这个问题？
我将根据用户交互显示/隐藏这些“图层” - 两个图层都需要语义侧边栏功能。
<body>
<div id="LAYER-1" class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
</div>
<div class="pusher">
<!-- ************** Layer content ************* !-->
</div>
<div id="LAYER-2" class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
</div>
<div class="pusher">
<!-- ************** Layer content ************* !-->
</div>
</body>
我能够通过为context侧边栏设置Semantic来解决这个问题。这个答案（Semantic-ui - how to use sidebar in only part of a page? (ie with context)）有助于澄清如何指定context比example docs中的Semantic更好一些
所以我最终得到了：将每个“侧边栏集”包装在带有ID的div中，然后将该div指定为context。 “图层”div具有显示/隐藏最顶层的按钮。没有得到关于设置的任何Semantic警告。
JS
$('#briefcaseExample .ui.sidebar')
.sidebar({
context: $('#briefcaseExample')
})
.sidebar('setting', 'transition', 'push')
$('#timelineExample .ui.sidebar')
.sidebar({
context: $('#timelineExample')
})
.sidebar('setting', 'transition', 'push')
HTML
<body onload="onLoadApp()">
<div id="briefcaseExample">
<div class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
<div id="sidebarTree" style="height: 100%;"></div>
</div>
<!-- ************** End Sidebar content ************* !-->
<div class="pusher">
<!-- ************** Site content ************* !-->
<div id="solidBlue"></div>
<div id="container" width="100%" height="100%">
<canvas id="c" width="100%" height="100%"></canvas>
</div>
<div class="briefcaseSidebarToggle">
<i class="big sidebar icon grey" onclick="toggleMenu()"></i>
</div>
<div class="briefcaseClose">
<i class="big remove circle icon grey" onclick="hideBriefcase()"></i>
</div>
<!-- ************** End Site content ************* !-->
</div>
</div>
<div id="timelineExample">
<div class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
<div id="timelineSidebar" style="height: 100%;"></div>
</div>
<!-- ************** End Sidebar content ************* !-->
<div class="pusher">
<!-- ************** Site content ************* !-->
<div class="timelineSidebarToggle">
<i class="big sidebar icon grey" onclick="toggleTimelineMenu()"></i>
</div>
<!-- ************** End Site content ************* !-->
<div id="solidColor">
<button onclick="showBriefcase()">Show Briefcase</button>
</div>
</div>
</div>
</body>