JQuery的不工作当引导CSS库添加

-1

背景：
我想测试一个解决的问题在这里：How to make toggle hidden by default。该代码使用jQuery来切换文本（“隐藏”是默认）。JQuery的不工作当引导CSS库添加

问题：
当我添加<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的功能）？

问：
可能有人请从工作解释为什么/ 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>

来源

2017-01-22 JustBlossom

@ A.Wolff谢谢你的帮助。我试了你的两个建议。我将jquery函数移动到其他导入的上方，并运行代码以查看Chrome开发人员工具>控制台中的错误。在控制台中没有出现错误（并且它仍然不起作用）。 – JustBlossom

似乎它会更容易使用[崩溃]（http://getbootstrap.com/javascript/#collapse）。这就是说，[toggle]（http://api.jquery.com/toggle/）有一个回调函数，可以用来验证它是否实际被调用。 –

它停止工作的原因是因为引导的.hidden类中重写jQuery的.toggle()功能。这是因为Bootstrap使用!important。这是自举的CSS的样子：

.hidden { 
    display: none!important; 
}

即使jQuery的.toggle()增加style="display:block"内嵌到你想要显示的元素，这些都被!important无效。

一个办法来解决这个问题是使用jQuery的toggleClass()功能，像这样：

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

我希望这有助于。如果有不明之处，请留下评论。

来源

2017-01-23 05:57:20

非常感谢！这工作。我只是想确保我理解你的解释。 jQuery toggle（）在show（）和hide（）之间切换元素 - div的可见性属性。然而，Bootstrap中的隐藏类（永久设置）会覆盖jQuery使用的show（）/ hide（）方法。这意味着该元素将始终隐藏。因此，我使用toggle类来更改正在应用于div的类。这覆盖了Bootstrap CSS。是对的吗？对不起，我是jQuery的新手。 – JustBlossom

@JustBlossom没错。通过在类上使用切换（隐藏），'display：none！impotant;'不再被应用。还有其他方法可以解决这个问题，但是这种方式适用于您当前的设置。 –

JQuery的不工作当引导CSS库添加

回答

相关问题