GWT-Bootstrap：两个响应式导航栏冲突答案

【问题标题】：GWT-Bootstrap: Two responsive navbars conflictingGWT-Bootstrap：两个响应式导航栏冲突
【发布时间】：2013-10-17 13:36:42
【问题描述】：

我正在 GWT 中做一个项目，并希望使用 twitter bootstrap 进行布局。所以我现在使用的是 gwt-bootstrap 2.2.1.0 库。我想要两个响应式导航栏，一个作为页眉，一个作为页脚。

当我缩小屏幕并且按钮合二为一时。然后我点击它，我希望只有那个导航栏展开。但它们都膨胀了。

我首先使用 HTML、CSS 和 JavaScript 进行了尝试，并且成功了。我必须修改 JavaScript 并给导航栏一个 id，所以 JavaScript 知道要扩展哪个。这里还有其他人提出的 JavaScript 问题：Two Responsive Nav bar in Bootsrap Page Conflicts

我的问题是如何使用 gwt-bootstrap 做到这一点。

Header.ui.xml

<g:HTMLPanel>
            <g:FlowPanel>
                <b:ResponsiveNavbar position="TOP">
                    <b:Nav alignment="RIGHT" ui:field="buttons">
                    </b:Nav>
                </b:ResponsiveNavbar>
            </g:FlowPanel>
        </g:HTMLPanel>

页脚.ui.xml

 <g:HTMLPanel>
            <g:FlowPanel>
                <b:ResponsiveNavbar position="BOTTOM">
                    <b:Nav alignment="RIGHT" ui:field="buttons">
                    </b:Nav>
                </b:ResponsiveNavbar>
            </g:FlowPanel>
        </g:HTMLPanel>

【问题讨论】：

标签： gwt-bootstrap

【解决方案1】：

由于没有人可以回答这个问题，我一直在寻找并尝试答案，终于找到了一个，所以我想与其他可能有同样问题的人分享。

/** Set the collapse button to the right target. */

//Set the right id to the header/footer.
buttons.getParent().getElement().setId("header");

//You have to go up a few tiers in the DOM.
Element ep = buttons.getParent().getElement().getParentElement();
Element ec = buttons.getParent().getElement().getParentElement().getFirstChildElement();

//Change the data-target attribute to your id.
ec.setAttribute("data-target", "#header");

【讨论】：