环境:Electron 桌面单页应用
我有一个项目，我想使用两个Semantic UI侧边栏方案。一次只能看到一个方案。我之前看过这个问题(
Semantic-UI: Two Sidebars Conflict, Only One at a Time? )但它只部分回答了我的问题。
做了一个简单的测试，将每个侧边栏方案包装在 div 中，我收到了一些 Semantic UI 警告(“必须移动侧边栏。为了获得最佳效果性能确保侧边栏和推送器是您的 body 标记的直接子级”)。在我进一步讨论之前，谁能告诉我下面的结构是否有效，或者是否有其他推荐的方法来解决这个问题？
我将根据用户交互显示/隐藏这些“层” - 两个层都需要语义侧边栏功能。
<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>
最佳答案
我能够通过设置语义侧边栏的上下文来解决这个问题。这个答案( Semantic-ui - how to use sidebar in only part of a page? (ie with context) )有助于阐明如何比 example 更好地指定上下文在语义文档
所以我最终得到的结果是:将每个“侧边栏集”包装在带有 ID 的 div 中，然后指定该 div 作为上下文。 “图层”div 具有用于显示/隐藏最顶层的按钮。没有收到任何有关设置的语义警告。
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>
关于javascript - 页面上 "layers"中有两个语义侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52359491/