在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，我有更多的选择深入到如苹果，亚历克斯，安妮什么。

目前使用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> 

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