Question

我尝试使用bootstrap下拉按钮和数据表。

我有2个问题。 1）新的下拉菜单不能正常工作。 2）包括数据表停止新的＆amp;旧式下拉列表工作

这里是html。

我在Safari 9.0.3上发现了这个问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="datatables.min.css"/>
        <link rel="stylesheet" type="text/css" href="Bootstrap-3.3.6/css/bootstrap.min.css"/>
    </head>
    <body>
        <div id="wrapper">

        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                New Style
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <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>

        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Old Style
                <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>
    <script type="text/javascript" src="jQuery-2.2.0/jquery-2.2.0.js"></script>

    <script type="text/javascript" src="Bootstrap-3.3.6/js/bootstrap.js"></script>
    <script type="text/javascript" src="datatables.min.js"></script>

    </body>
</html>

网页摘要： ///我没有足够的声誉发布3个链接，所以代替图片，这里不是1k字。两个看起来很正常的BS按钮，一个灰色（新款）没有插入符号，高于其他蓝色/绿色（旧式）带有插入符号.///

请注意，新样式按钮没有插入符号。

点击其中任何一个都不会导致显示下拉菜单。

在评论出包含数据表的<script>元素之后，我得到了新的样式标记 - 不是很好，但至少有一个类别的菜单：

New Style popup with datatables commented out

旧标记的工作方式很好：

Old style popup with datatables commented out

我很感激任何帮助。

我已经预料到的一些检查：

我的bootstrap disti是否包含下拉模块？是。
包含脚本的顺序会影响结果吗？否。
注释掉数据表css链接有什么影响吗？否。

我很感激这一点的所有帮助。

谢谢！

Answer 1

我找到了解决方法。

将事件监听器附加到按钮，并在单击时切换下拉列表的状态。 $ delete是DOM中按钮的一个祖先的快捷方式。

$delete.find('.dropdown-toggle').on ('click', function (ev) {
    console.log ('delete dropdown clicked');
    $(this).dropdown('toggle');
});

这适用于旧的和新样式下拉菜单，但新样式仍然存在原始帖子中确定的格式问题。

RTFM citation

Answer 2

小学生错误，我很害怕。

我发现我包括jQuery＆amp; bootstrap两次 - 一次显式地通过index.hmtl中的标签，一次是隐式的，因为datatables.min.js（有帮助？）将jQuery和Bootstrap添加到自身。

事情就像他们应该只使用这些脚本的一个包含一样。

bootstrap 3.3.6下拉列表不起作用，DataTables使其更糟

2 个答案: