引导下拉列表按钮不起作用

Posted

技术标签:

【中文标题】引导下拉列表按钮不起作用【英文标题】:Bootstrap dropdown list button doesn't work 【发布时间】:2016-03-18 08:42:45 【问题描述】:

点击引导按钮时,应该会打开一个列表,但点击时它没有响应。

<div class="btn-group" dropdown>
  <button type="button" class="btn btn-info">test</button>
  <button type="button" class="btn btn-info dropdown-toggle">
    <span class="caret"></span>
    <span class="sr-only">Split button!</span>
  </button>

  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>

代码:http://jsfiddle.net/Fanadka/r0sfvrcz/

有什么想法吗?

【问题讨论】:

除了@adeneo解决方案,我们应该改变文件的顺序如下: 而不是在***.com/questions/22658015/…之前有引导 【参考方案1】:

首先,您必须在小提琴中包含 jQuery。

其次,您缺少按钮和下拉菜单之间的连接,您应该添加一个 ID 和一些 aria 标签,像这样

<div class="btn-group dropdown">
    <button type="button" class="btn btn-info">test</button>
    <button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
    </ul>
</div>

FIDDLE

【讨论】:

以上是关于引导下拉列表按钮不起作用的主要内容,如果未能解决你的问题,请参考以下文章

带有按钮组的引导下拉切换在导航栏中不起作用

bootstrap4 的下拉列表不起作用

Angularjs引导下拉菜单不起作用

使用 Bootstrap Selectpicker 的搜索框下拉菜单不起作用

引导下拉链接不起作用

引导下拉菜单不起作用