首页 文章

Bootstrap popover仅适用于悬停

提问于
浏览 次
0

我一直很难让Bootstraps popover在点击时显示，而不是在悬停时显示 . 我查看了此页面上的示例 . http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h

我复制了示例中的确切脚本src链接以及元和链接行 . 我也初始化popover无济于事 . 这是我正在使用的简化版本 .

<head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <link rel="stylesheet" type ="text/css" href="style.css" />     
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta charset="utf-8"> 

    </head>           
    <body>
                    <div id="container">
                        <a href="#" data-toggle="popover" title="Popover Header" data-trigger="click" data-content="Some content inside the popover">Toggle popover</a>
                    </div>
                    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                    <script>
                                $(document).ready(function(){
                                        $('[data-toggle="popover"]').popover();   
                                });
                    </script>
               </body>

我不知道这是否是正常的事情，但我尝试打开页面，右键单击a元素并单击inspect（在chrome中） . 在右下角，它显示了两个错误 .

Uncaught Error：Bootstrap的JavaScript需要jQuery Uncaught TypeError：$（...） . popover不是函数

它找不到JQuery？它肯定存在 . 当我将鼠标悬停在它上面时，该元素显示并显示文本，当我单击它时没有任何反应 .

javascript jquery html css twitter-bootstrap

1 回答

  • 2

    首先包含jQuery脚本：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    在页面加载时将此错误记录到控制台：

    Uncaught Error: Bootstrap's JavaScript requires jQuery

    这意味着bootstrap js正在寻找jquery对象 .

    回复于

相关问题