Fatal编程技术网
  • jquery/
  • JQuery没有'；添加引导CSS库时不起作用

JQuery没有'；添加引导CSS库时不起作用

jquery html css twitter-bootstrap

JQuery没有'；添加引导CSS库时不起作用,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,背景： 我试图在这里测试问题的解决方案：。代码使用jquery切换文本（默认为“隐藏”） 问题： 当我添加（一个用于几个其他网页的库）时，jquery命令不再工作。当我点击链接切换文本时，什么也没发生 我所尝试的： 我认为问题与jquery在页面上的加载方式有关。因此，我尝试将script标记的位置更改为在主体之后（以及在头部），以查看这是否会有所不同 我在这里看了这个问题（），但答案是使用jquery的on（）方法绑定事件（至少我认为这就是所说的）。但是，我不认为绑定事件是问题所在，因为在我的

背景：
我试图在这里测试问题的解决方案：。代码使用jquery切换文本（默认为“隐藏”）

问题：
当我添加
（一个用于几个其他网页的库）时，jquery命令不再工作。当我点击链接切换文本时，什么也没发生

我所尝试的：
我认为问题与jquery在页面上的加载方式有关。因此，我尝试将script标记的位置更改为在主体之后（以及在头部），以查看这是否会有所不同

我在这里看了这个问题（），但答案是使用jquery的on（）方法绑定事件（至少我认为这就是所说的）。但是，我不认为绑定事件是问题所在，因为在我的例子中，在添加样式库时jquery不起作用（这些不应该影响jquery的功能，对吧？）

问题：
有人能解释一下为什么CSS库会阻止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>


.隐藏{
显示：无；
}
函数切换器（divId）{
$（“#”+divId）.toggle（）；
}
这是一个测试


这是一个测试
它停止工作的原因是引导的
隐藏的
类覆盖了jQuery的
.toggle（）
特性。这是因为引导使用
！重要信息
。Bootstrap的CSS是这样的：


.hidden {
    display: none!important;
}


即使jQuery的
.toggle（）
将
style=“display:block”
内联添加到要显示的元素中，这些元素也会被
清除！重要信息

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


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



我希望这有帮助。如果有什么不清楚的地方，请给我留言。
@a.Wolff谢谢你的帮助。我试过你的两个建议。我将jquery函数移到其他导入之上，并在ChromeDeveloperTools>Console中运行代码以查看错误。控制台中没有显示任何错误（而且仍然不起作用）。看起来它会更容易使用。也就是说，它有一个回调，可以用来验证它是否真的被调用。非常感谢！成功了。我只是想确定我明白你的解释。jQuery toggle（）在show（）和hide（）之间切换元素-div的可见性属性。但是，引导中的隐藏类（永久设置）覆盖jQuery使用的show（）/hide（）方法。这意味着该元素将始终隐藏。因此，我使用toggle类来更改应用于div的类，这将覆盖引导CSS。是这样吗？对不起，我不熟悉jQuery。@没错。通过在类（隐藏）上使用切换，
display:none！重要的不再应用。还有其他的方法，但这种方法适用于您当前的设置。