Question

背景
我试图在这里测试问题的解决方案：How to make toggle hidden by default。代码使用jquery来切换文本（使用＆＃34;隐藏＆＃34;是默认值）。

问题：
当我添加<link rel="stylesheet" href="../../bootstrap-3.3.4-dist/css/bootstrap.min.css">（一个我用于其他几个网页的库）时，jquery查询命令不再起作用。当我点击链接切换文本时，没有任何反应。

我尝试了什么：
我认为这个问题与jquery在页面上加载的方式有关。因此，我尝试将脚本标记的位置更改为在正文（以及头部）之后，以查看是否会产生影响。

我在这里看了一下这个问题（Jquery Datatables and Bootstrap Toggle Doesn't work Together），但答案说使用jquery的on（）方法来绑定事件（至少我认为这就是所说的）。但是，我不认为绑定事件是问题，因为在我的情况下，添加样式库时jquery不起作用（那些不应该影响jquery的功能吗？）。

问题：
有人可以解释为什么/如何阻止jquery工作？你能指点我一些有用的文件吗？此外，是否有针对此问题的解决方法？如果有的话，我会认为jQuery库的两个不同版本会导致这个问题。我对jQuery很新，所以任何建议都值得赞赏。

代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .hidden {
            display:none;
        }

    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../bootstrap-3.3.4-dist/jquery/1.11.1/jquery.min.js"></script>

    <link rel="stylesheet" href="../../bootstrap-3.3.4-dist/css/bootstrap.min.css">

    <script src="../../bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="../../fileLoader.js"></script>
    <script>
        function toggler(divId) {
            $("#" + divId).toggle();
        }
    </script>
</head>
<body>

    <a href="#" onclick="toggler('myContent');">this is a test</a>
    <div id="myContent" class='hidden'>
        <div>this is a test #1 </div>
    </div> 
    <br />
    <a href="#" onclick="javascript:toggler('myContentt');">
        <span>this is a text</span>
    </a>
    <div id="myContentt" class='hidden'>
        this is a test #2
    </div>
</body>
</html>

Answer 1

它停止工作的原因是因为Bootstrap的.hidden类覆盖了jQuery的.toggle()功能。这是因为Bootstrap使用!important。这就是Bootstrap的CSS的样子：

.hidden {
    display: none!important;
}

即使jQuery的.toggle()将style="display:block"内联添加到您想要显示的元素中，但这些元素仍会被!important无效。

解决这个问题的一种方法是使用jQuery的toggleClass()函数，如下所示：

function toggler(divId) {
    $("#" + divId).toggleClass('hidden');
}

我希望这会有所帮助。如果有什么不清楚，请给我留言。

添加Bootstrap CSS库时，JQuery不起作用

1 个答案: