jquery 切换 css3 转换不工作

标签 jquery css

我按照在 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

最佳答案

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

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

这是您的代码的 fiddle - 没有更改 - 但选择了“onLoad”选项(在左侧): http://jsfiddle.net/aHst8/

关于jquery 切换 css3 转换不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25013767/

相关文章:

css - 如何用CSS创建 Angular 边缘形状?

jquery - 防止 DataTables 隐藏工具提示

jquery - 在 jQuery 日期小部件中设置默认初始年份时遇到问题

javascript - jquery点击时出现html中的另一个元素

javascript - 如何在单击时选中/取消选中单选按钮?

jquery - 悬停时显示所有子链接的导航

html - 类似于HTML中 "li"元素的红点

javascript - 移动删除输入文本框内的字形

javascript - JSON stringify 有问题吗?

html - IE 中的 CSS 固定标题表