打开后无法启动Bootstrap下拉功能 [英] Can't get Bootstrap dropdown function to fire after open

问题描述

我已经设置了我的代码，以便在打开Bootstrap菜单时运行警报，但我很难将警报触发。

I've set up my code to run an alert upon the Bootstrap menu being opened, but I'm struggling to get the alert to fire.

$('.dropdown.data-api').on('shown.bs.dropdown', function () {
   alert('it worked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="dropdown">
    	
    <span data-toggle="dropdown">Click me</span>

    <ul class="dropdown-menu">
        <li>Hello World!
    </ul>
    	
</div>

推荐答案

事件选择器正在寻找包含下拉列表和 data-api 类的下拉列表。从事件选择器中删除 .data-api ，或将 data-api 添加到下拉类列表中。

The event selector is looking for a dropdown with both dropdown and data-api classes. Either remove the .data-api from the event selector, or add data-api to the dropdown class list.

$('.dropdown.data-api').on('shown.bs.dropdown', function () {
   alert('it worked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="dropdown data-api">
    	
    <span data-toggle="dropdown">Click me</span>

    <ul class="dropdown-menu">
        <li>Hello World!
    </ul>
    	
</div>

这篇关于打开后无法启动Bootstrap下拉功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！