Question

我在开发扩展缩放切换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;
}

我真的不是一个程序员，所以我真的很感激一些提示，以解决这个问题，为什么会这样。

Answer 1

jQuery toggle显示或隐藏一个元素，它不会切换函数。

要按照您想要的方式切换高度，最好在CSS文件中引入一个新的CSS类，并使用jQuery toggleClass添加或删除该类。所以：

JS改为：

$(document).ready(function () {
    $(".noticia").toggleClass('large');
});

CSS添加类：

.noticia.large {
    height: 600px;
}

Answer 2

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切换隐藏了div元素

2 个答案: