JQuery funciona bien sin vincular bootstrap, pero si agrego bootstrap todo sale mal, básicamente estoy tratando de construir preguntas frecuentes simples. Si alguien me puede ayudar? Aquí está el archivo 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:

(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 va de esta manera

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;}       
1
NewBee 10 may. 2016 a las 15:50

4 respuestas

La mejor respuesta

Es porque bootstrap ya tiene la clase hide que está configurada en display:none !important;, intente usar un nombre de clase diferente. ¡Vea abajo!

(por ejemplo, cambié tu clase a hides en dos lugares)

(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>
2
Luthando Ntsekwa 10 may. 2016 a las 13:13

Es muy probable que sea un problema de compatibilidad de versiones. Recomendaré usar Bower un administrador de paquetes para evitar este tipo de conflictos de versiones y dependencias.

 npm install -g bower
 bower install bootstrap
 bower install jquery

Luego encuentre sus archivos *.css y *.js dentro de la carpeta 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>
0
DhiaTN 10 may. 2016 a las 12:57
<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>

Trabajando Codepen

0
Shoeb Mirza 10 may. 2016 a las 13:07
   (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 de trabajo

0
Peter Darmis 10 may. 2016 a las 13:06