使用GWT中的向下钻取功能创建下拉菜单。

Question

我想创建一个具有向下钻取功能的下拉菜单。我在UI绑定XML中有类似的东西：

<b:DropDownMenu ui:field="menuInfo" addStyleNames="wt-dropdown-menu">
  <b:AnchorListItem ui:field="menuItemA" text="A"/>
  <b:AnchorListItem ui:field="menuItemB" text="B"/>
</b:DropDownMenu>

现在，这只会创建一个带有项目A，B的下拉列表。

我想要这样的东西，我点击A，我有更多选择深入研究Apple，Alex，Anne等。

目前使用GWT 2.7，我知道MenuBar具有该功能，但想知道我是否可以通过DropDown实现这一点。

Answer 1

像这样它应该工作（测试）。

添加以下CSS：

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

然后将以下结构添加到* .ui.xml：

<b:AnchorButton dataToggle="DROPDOWN">DropDown</b:AnchorButton>
<b:DropDownMenu>
    <b:ListItem styleName="menu-item dropdown dropdown-submenu">
        <b:Anchor>A</b:Anchor>
        <b:DropDownMenu>
            <b:AnchorListItem>Apple</b:AnchorListItem>
            <b:AnchorListItem>Alex</b:AnchorListItem>
            <b:AnchorListItem>Anne</b:AnchorListItem>
        </b:DropDownMenu>
    </b:ListItem>
    <b:ListItem styleName="menu-item dropdown dropdown-submenu">
        <b:Anchor>B</b:Anchor>
        <b:DropDownMenu>
            <b:AnchorListItem>Ben</b:AnchorListItem>
            <b:AnchorListItem>Bea</b:AnchorListItem>
        </b:DropDownMenu>
    </b:ListItem>
</b:DropDownMenu>

之后结果应如下所示（当然您可以更改样式）：