GWT에서 드릴 다운 기능이있는 드롭 다운 메뉴를 만듭니다.

Question

드릴 다운 기능이있는 드롭 다운 메뉴를 만들고 싶습니다. UI 바인더 XML에서 이와 비슷한 항목이 있습니다. 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

이렇게하면 작동합니다 (테스트 됨).

.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에 다음과 같은 구조를 추가 :

은 다음과 CSS 추가 이후

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

결과는 다음과 같아야을 (물론 당신은을 변경할 수 있습니다 스타일) :