JQuery切换隐藏div元素 [英] JQuery toggle is hiding the div element

问题描述

我在开发扩展缩小切换div时遇到了一些麻烦。

I'm having some trouble with developing an expand-shrink toggle div.

我的目标是点击div，使其变大，再点击一次

My goal is to click the div and make it bigger, clicking it again and get it back to the original height.

我有这个JQuery脚本，但它导致整个div消失。

I got this JQuery script but it is causing the entire div to disappear.

$(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不是问题的原因，

I believe the css is not the cause of the problem, but just in case:

.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;
}

我真的不是一个程序员，所以我真的很感谢一些提示

I'm not really much of a programer so I would really appreciate some tips to get this solved and why is it happening.

推荐答案

toggle（）（Event） 事件已在jQuery 1.8中弃用， jQuery 1.9。

toggle() (Event) event is deprecated in jQuery 1.8 and removed in jQuery 1.9.

当前 .toggle（） 函数更改元素的状态。

Current .toggle() function changes the state of the element.

$(document).ready(function () {
    $(".noticia").click(function(){
        $(this).css('height', $(this).css('height') == "420px" ? "600px" : "420px");
    });
});

这篇关于JQuery切换隐藏div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！