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庫添加

回答

相關問題