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

Question

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

我在显示下拉列表时遇到问题。单击下拉菜单(“选择语言”)会自动关闭侧边栏，并且不会显示下拉菜单。

我的 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