Question

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

我无法显示下拉列表。点击下拉菜单（＆＃34;选择语言＆＃34;）会自动关闭侧边栏，不会显示下拉列表。

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

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

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

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

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

同时添加此款式

 public class Program
{
    private static void Main(string[] args) {
        var list = new List<Foo>();

        for (var i = 0; i < 10; i++) {
            list.Add(new Foo());
            if (i == 5) {
                var foo = new Foo() {
                    Group = { "One", "Two", "Three" }
                };
                list.Add(foo);
            }
        }

        var maxGroup = list.Max(x => x.Group); //throws error
    }

}

public class Foo {
    public Guid Id { get; } = new Guid();
    public int Field1 { get; set; }
    public int Field2 { get; set; }
    public int Field3 { get; set; }
    public int Field4 { get; set; }

    public List<string> Group { get; set; } = new List<string>();

}

以下是Fiddle

语义UI侧栏内的下拉列表

1 个答案: