语义-UI 侧边栏内的下拉菜单

Question

我有一个侧边栏，基本上用作二级菜单。在这个侧边栏中，我需要实现一个下拉菜单，它将显示在变暗的推送内容之上。

我无法显示下拉菜单。单击下拉菜单 ("Select Language") 会自动关闭边栏，并且不会显示任何下拉菜单。

我的 JS 是这样的：

$('.context.example .ui.sidebar')
  .sidebar({
    context: $('.context.example .bottom.segment'),
    transition: 'push'
  })
  .sidebar('attach events', '.context.example .menu .item')
;

$('ui.dropdown').dropdown();

完整示例在此jsFiddle。

如何确保侧边栏不会在单击时关闭并且下拉菜单显示在变暗的推送内容之上？

非常感谢！

Answer 1

您需要将边栏操作事件附加到顶部附加的菜单项，而不是选择所有菜单项。并将您的下拉列表初始化为

$('.ui.dropdown').dropdown();

将事件附加到顶部菜单按钮，

$('.context.example .ui.sidebar')
   .sidebar('attach events', '.context.example .context.example .top.attached.menu .item')

也添加这个样式

.ui.sidebar {
    overflow: visible !important;
}

这是Fiddle

语义-UI 侧边栏内的下拉菜单

Dropdown Inside a Semantic-UI Sidebar

javascript

semantic-ui