Question

我按照我在StackOverflow答案中找到的说明进行操作。

这是一个网页：http://www.pardo.cat/Xta/Index4.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
.Informacio_boto, .Informacio_contingut{
width: 400px;
}
.Informacio_contingut {
}
#Informacio_boto {
background-color: rgba(0,0,0,1.00);
color: rgba(255,255,255,1.00);
height: 25px;
font-size: 13px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
#Informacio_continguts {
background-color: rgba(255,245,0,1.00);
color: rgba(0,0,0,1.00);
padding-right: 20px;
padding-left: 20px;
z-index: 20;
position: absolute;
width: 360px;
max-height: 0px;
overflow-y: hidden;
-webkit-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
transition: max-height 2s ease;
}
#Informacio_continguts.expandir {
max-height: 999px;
}
#pasarencima {
background-color: rgba(255,0,4,1.00);
height: 500px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#Informacio_boto').click (function() {
$('#Informacio_continguts').toggleClass('expandir')
});
</script>
</head>
<body>
<div class="Informacio_contingut">
<div id="Informacio_boto">Informació</div>
<div id="Informacio_continguts">
  <p class="petit">Les linies ADSL normals garanteixen un 10% de cabdal, amb aquest tipus de linia empresarial, garantim el 50%.</p>
  <p class="petit">En totes les connexions assignem una Ip fixe, per poder facilitar les connexions remotes, Voip, TransisIP, etc.</p>
  <p class="petit">Sistema de gestió i administració propi.</p>
  <p class="petit">Instal·lació<br>
    Instal·lació d'una antena Nanobridge M5 aprofitant el màstil existent.<br>
    Router RB750/951 amb 5 Wan's.</p>
 </div>
 </div>
 <div id="pasarencima"> Colocar aquí el contenido para  id "pasarencima"</div>
</body>
</html>

其实我不知道它为什么不起作用。我尝试过我找到的变种，但我不起作用。

使用CSS3，如果它适用于“悬停”

这是一个网页：http://www.pardo.cat/Xta/Index3.php

Answer 1

在我看来，您的脚本未正确加载。尝试将其更改为：

$(document).ready(function(){
    $('#Informacio_boto').click (function() {
        $('#Informacio_continguts').toggleClass('expandir')
    });
})

以下是您的代码的一个小提琴 - 没有更改 - 但选择了'onLoad'选项（左侧）： http://jsfiddle.net/aHst8/

jquery toggle css3过渡不起作用

1 个答案: