JQuery切换隐藏了div元素
我在开发扩展缩放切换div方面遇到了一些麻烦。
我的目标是单击div并使其变大，再次单击它并将其恢复到原始高度。
我得到了这个JQuery脚本，但它导致整个div消失。
$(document).ready(function () { $(".noticia").toggle(function(){ $(".noticia").css('height', '600px'); }, function () { $(".noticia").css('height', '420px'); }); }); 和HTML
21 de Janeiro de 2014 Fernando Mendes é o novo rosto da OPTICENTER
Os seus óculos ao preço certo!
É 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...
Os seus óculos ao preço certo!
É 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.
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.
我相信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; }
我真的不是一个程序员，所以我真的很感激一些提示，以解决这个问题，为什么会这样。
toggle() (Event)事件在jQuery 1.8中已弃用，并在jQuery 1.9中删除。
当前.toggle()函数更改元素的状态。
$(document).ready(function () { $(".noticia").click(function(){ $(this).css('height', $(this).css('height') == "420px" ? "600px" : "420px"); }); });
jQuery切换显示或隐藏元素，它不切换函数。
要像你想的那样切换高度，最好在CSS文件中引入一个新的CSS类，并使用jQuery toggleClass来添加或删除该类。 所以：
JS改为：
$(document).ready(function () { $(".noticia").toggleClass('large'); });
CSS加类：
.noticia.large { height: 600px; }