在 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>

之后的结果应该是这样的（当然你可以改变样式）：

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

Create Dropdown Menu with Drilldown Capabilities in GWT.

java

gwt

drilldown

drop-down-menu