Question

我有以下代码来显示一些按钮和下拉菜单。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li><a href="#">Enable</a>

            </li>
            <li><a href="#">Disable</a>

            </li>
        </ul>
    </div>
    <div class="button-group pull-right">
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li>
                <button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>

                </button>
            </li>
            <li>
                <button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>

                </button>
            </li>
        </ul>
    </div>
</div>

除了其中一个菜单没有出现在下拉列表中外，它可以正常工作。

Fiddle here

任何想法都会受到赞赏。

Answer 1

看起来您没有使用最新版本的JQuery。请更新JQuery并使用Bootstrap库来完成这项工作。

在你的小提琴中，选择jQuery 2.1.0并选择Bootstrap 3.2.0选项。

Answer 2

看起来我必须将下拉按钮放入他们自己的btn-group。

Fiddle here

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <div class="btn-group" role="group" aria-label="Dropdown Group">
            <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

            </button>
            <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
                <li><a href="#">Enable</a>

                </li>
                <li><a href="#">Disable</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="button-group pull-right">
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li>
                <button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>

                </button>
            </li>
            <li>
                <button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>

                </button>
            </li>
        </ul>
    </div>
</div>

定位菜单位于下拉列表中

2 个答案: