我在开发扩展-收缩切换 div 时遇到了一些问题。
我的目标是单击 div 使其变大,再次单击它并使其恢复到原来的高度。
我得到了这个 JQuery 脚本,但它导致整个 div 消失。
$(document).ready(function () {
$(".noticia").toggle(function(){
$(".noticia").css('height', '600px');
}, function () {
$(".noticia").css('height', '420px');
});
});
和html
<div class="noticia">
<img src="img/noticias/novo_rosto.jpg">
<div class="descricao">
<span class="data">21 de Janeiro de 2014</span>
<h1>Fernando Mendes é o novo rosto da OPTICENTER</h1>
<p class="preview">
Os seus óculos ao preço certo!<br>
É o slogan da nova campanha do grupo e é inspirado na aposta contínua da OPTICENTER em apresentar aos seus clientes os óculos a um preço fechado...
</p>
<p class="full">
Os seus óculos ao preço certo!<br>
É o slogan da nova campanha do grupo e é inspirado na aposta contínua da OPTICENTER em apresentar aos seus clientes os óculos a um preço fechado, numa oferta de mais de 1000 modelos à escolha com lentes certificadas e de fabrico nacional.<br>
Confiança, Seriedade, Profissionalismo e Credibilidade são os valores defendidos pela OPTICENTER que acredita serem transmitidos na integra por Fermando Mendes, um dos rostos mais conhecidos e populares da televisão nacional.
</p>
</div>
</div>
我相信 css 不是问题的原因,但以防万一:
.noticia{
width: 280px;
height: 420px;
border-bottom: 1px solid #EEE;
margin: 0 20px 0 0;
background: #FFF;
-webkit-transition: background 0.1s linear, border-bottom 0.1s linear;
-moz-transition: background 0.1s linear, border-bottom 0.1s linear;
-o-transition: background 0.1s linear, border-bottom 0.1s linear;
transition: background 0.1s linear, border-bottom 0.1s linear;
float: left;
position: relative;
}
.noticia .descricao{
width: 278px;
height: 235px;
margin: -3px 0 10px 0;
border-right: 1px solid #EEE;
border-left: 1px solid #EEE;
-webkit-transition: border-right 0.1s linear, border-left 0.1s linear;
-moz-transition: border-right 0.1s linear, border-left 0.1s linear;
-o-transition: border-right 0.1s linear, border-left 0.1s linear;
transition: border-right 0.1s linear, border-left 0.1s linear;
text-align: center;
overflow: auto;
}
.noticia .descricao .data{
font-family: Arial;
font-size: 11px;
text-align: center;
color: #B7B7B7;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.noticia .descricao h1{
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
margin: 30px 0 0 0;
}
.noticia .descricao p{
text-align: center;
padding: 0 20px;
color: #B7B7B7;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
font-family: Arial;
font-size: 12px;
line-height: 19px;
}
.preview{
visibility: visible;
}
.full{
visibility: hidden;
}
.noticia:hover{
background: #606062;
border-bottom: 1px solid #606062;
}
.noticia:hover .descricao{
border-right: 1px solid #606062;
border-left: 1px solid #606062;
}
.noticia:hover .descricao .data, .noticia:hover .descricao h1, .noticia:hover .descricao p{
color: #FFF;
}
我不是真正的程序员,所以我非常感谢一些提示来解决这个问题以及为什么会这样。
最佳答案
jQuery toggle显示或隐藏元素,它不会切换功能。
要像您希望的那样切换高度,最好在您的 CSS 文件中引入一个新的 CSS 类并使用 jQuery toggleClass。添加或删除类。所以:
JS 对此的更改:
$(document).ready(function () {
$(".noticia").toggleClass('large');
});
类的CSS添加:
.noticia.large {
height: 600px;
}
关于JQuery 切换隐藏了 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30194586/