java - 在 GWT 中创建具有向下钻取功能的下拉菜单。

Question

我想创建一个具有向下钻取功能的下拉菜单。我在 UI 绑定(bind)器 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>

之后的结果应该是这样的(当然你可以改变样式):