Question

<div class="form-group">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
                        Example
                        <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </div>
            </div>

在默认的home.html中，我添加了该代码以显示下拉列表。但是当我点击时，没有显示框内的值。那么如何使其可行？

Answer 1

下面是bootstap网站的工作示例，您不必使用ul / li作为列表，

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" 
 id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-
 expanded="false">
 Dropdown button
 </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

Answer 2

在angularjs中试试这个：

在下面更新了我的答案

<div class="form-group">
    <div uib-dropdown class="dropdown">
        <button class="btn btn-primary dropdown-toggle" uib-dropdown-toggle type="button" data-toggle="dropdown">Dropdown
            Example
            <span class="caret"></span></button>
        <ul class="dropdown-menu" uib-dropdown-menu>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </div>
</div>

Answer 3

我正在使用jhipster 6.0.1（带有自举程序4.3.1的角7.2.12），并且遇到相同的问题。

这里的“问题”是jhipster 不使用普通的旧引导程序，在我的情况下，它使用的是ng-bootstrap，即4.1.1。您可以在navbar.component.html文件的实体菜单中看到有关如何使用下拉菜单的示例，他们在其中使用了ngbDropdown，ngbDropdownToggle和ngbDropdownMenu指令。或者，您可以使用ng-bootstrap dropdown documentation中提供的任何示例，即

<div class="btn-group mr-3">
  <button type="button" class="btn btn-primary">Split me</button>
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button ngbDropdownItem>One</button>
      <button ngbDropdownItem>Two</button>
      <button ngbDropdownItem>Four!</button>
    </div>
  </div>
</div>

Bootstrap下拉列表在jhipster中不起作用

3 个答案: