Bootstrap不适用于jQuery

Question

jQuery is working fine without linking bootstrap, but if i add bootstrap it goes all wrong basically i'm trying to build simple FAQ. jQuery无需链接引导程序即可正常运行，但是如果我添加了引导程序，那基本上会出错，我正在尝试构建简单的FAQ。 If somebody can help me? 如果有人可以帮助我？ here is the html file. 这是html文件。

<html>
<head>
    <meta charset=utf-8>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"> //works fine without this
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="jquery-2.2.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <dl>    
        <dt>title</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer     quis porttitor erat.</dd>
        <dt>title</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat.</dd>
    </dl>
</body>
</html>

jQuery/script: jQuery的/脚本：

(function() {
    var dd =  $('dd');
    dd.filter(':nth-child(n+2)').addClass('hide');
    $('dl').on('click', 'dt', function() {
        $(this)
            .next()
            .slideDown(200)
            .siblings('dd')
            .slideUp(200);
    });
})();

css goes this way CSS走这边

body {
    width: auto;
    margin: 20px;
}

dd {
    margin: 0;
    padding: 1em 0;
}

dt {
    cursor: pointer;
    font-weight: bold;
    font-size : 1.5em;
    line-height: 2em;
    background: #e3e3e3;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid white;
}

dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }

.hide { display: none;}

Answer 1

it is because bootstrap already have hide class which is set to display:none !important; 这是因为引导程序已经具有设置为display:none !important; hide类display:none !important; , try using a different class name. ，请尝试使用其他类名。 See below! 见下文！

(eg I changed your class to hides in two places) （例如，我将您的班级改为hides在两个地方）

 (function(){ var dd = $('dd') ; dd.filter(':nth-child(n+2)').addClass('hides'); /** i changed it here **/ $('dl').on('click', 'dt', function(){ $(this). next() .slideDown(200) .siblings('dd') .slideUp(200); }); })();

 body { width: auto; margin: 20px; } dd { margin: 0; padding: 1em 0; } dt { cursor: pointer; font-weight: bold; font-size : 1.5em; line-height: 2em; background: #e3e3e3; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } .hides { display: none;} /** i also changed it here **/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <html> <head> <meta charset=utf-8> <title></title> </head> <body> <dl> <dt>title</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat. </dd> <dt>title</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat. </dd> </dl> </body> </html>

Answer 2

It's most probably a versions compatibility problem. 这很可能是版本兼容性问题。 I will recommand to use Bower a package manager to avoid this kind of version and dependencies conflicts. 我将建议使用Bower软件包管理器，以避免这种版本和依赖项冲突。

 npm install -g bower
 bower install bootstrap
 bower install jquery

then find your *.css and *.js files within the bower_components folder: 然后在bower_components文件夹中找到*.css和*.js文件：

<link rel="stylesheet" href="bower_components/.../bootstrap.css"> 
<link rel="stylesheet" href="style.css" type="text/css">
<script src="bower_components/.../jquery.js"></script>
<script src="bower_components/.../bootstrap.js"></script>

Answer 3

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 (function(){ var dd = $('dd') ; dd.filter(':nth-child(n+2)').addClass('hide'); $('dl').on('click', 'dt', function(){ $(this). next() .slideDown(200) .siblings('dd') .slideUp(200); }); })();

 body { width: auto; margin: 20px; } dd { margin: 0; padding: 1em 0; } dt { cursor: pointer; font-weight: bold; font-size : 1.5em; line-height: 2em; background: #e3e3e3; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } .hide { display: none;}

 <script src="https://code.jquery.com/jquery-2.2.3.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <dl> <dt>title</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat. </dd> <dt>title</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat. </dd> </dl>

Working Codepen 工作码笔

Answer 4

   (function(){
    $('dd').hide();
    $('dt').on('click', function(){ 
    if($(this).next("dd").is(":visible")) {
        $(this).next("dd").hide(200);
    } else {
        $(this).next("dd").show(200);
    }
    });
    })();

Working Fiddle 工作小提琴

Bootstrap不适用于jQuery

问题描述

4 个解决方案

解决方案1
2 已采纳 2016-05-10 13:00:24

解决方案2
0 2016-05-10 12:57:56

解决方案3
0 2016-05-10 13:01:29

解决方案4
0 2016-05-10 13:06:15

Bootstrap不适用于jQuery

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-05-10 13:00:24

解决方案2 0 2016-05-10 12:57:56

解决方案3 0 2016-05-10 13:01:29

解决方案4 0 2016-05-10 13:06:15

解决方案1
2 已采纳 2016-05-10 13:00:24

解决方案2
0 2016-05-10 12:57:56

解决方案3
0 2016-05-10 13:01:29

解决方案4
0 2016-05-10 13:06:15