Question

jQuery工作正常而没有链接bootstrap，但如果我添加bootstrap它完全错了基本上我正在尝试构建简单的FAQ。如果有人可以帮助我？这是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 /脚本：

(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;}

Answer 1

这是因为bootstrap已经将hide类设置为display:none !important;，尝试使用不同的类名。见下文！

（例如，我在两个地方将班级改为hides）

＆＃13;

(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);
});

})();

＆＃13;

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 **/

＆＃13;

<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>

＆＃13;

Answer 2

这很可能是版本兼容性问题。我建议使用Bower包管理器来避免这种版本和依赖冲突。

 npm install -g bower
 bower install bootstrap
 bower install jquery

然后在*.css文件夹中找到您的*.js和bower_components个文件：

<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>

＆＃13;

(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);
});

})();

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

工作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);
    }
    });
    })();

工作Fiddle

Bootstrap不能与jQuery一起使用

4 个答案: