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

之後的結果應該是這樣的（當然你可以改變造型）：