Question

我正在尝试使用jQuery来扩展和收缩div的高度，当点击一个链接时，我不能为我的生活弄清楚我做错了什么。

这是html;

<div id="slider" class="map">
    <div id="map-canvas">this is a test</div>
</div>

<div id="slider-map"><a href="#" id="expand">Expand +</a></div>

CSS中的滑块高度默认为300px

这是jQuery;

$(document).ready(function() {

    var maxWidth = 500;
    var minWidth = 300;

    $("#expand").click(
        function(){
            var curHeight = $("#slider").height();
            if(curHeight==300)
            {
                $("#slider").animate({height: maxWidth+"px"}, { queue:false, duration:400 });
                $("#expand").html("Contract <small style='font-size:12px;'>-</small>");
            }
            else
            {
                $("#slider").animate({height: minWidth+"px"}, { queue:false, duration:400 });
                $("#expand").html("Expand <small style='font-size:12px;'>+</small>");
            }
        return false;
    });
}

我在没有调用map-canvas div中的Google maps API的情况下尝试了这个，看看那是否是罪魁祸首，但它仍然无效。

非常感谢任何帮助

Answer 1

你忘了关闭$（文件）.ready（）;功能

JS：

$(document).ready(function(){

    var maxWidth = 500;
    var minWidth = 300;

    $("#expand").click(

        function(){
            var curHeight = $("#slider").height();
            alert(curHeight);
            if(curHeight==300)
            {
                $("#slider").animate({height: maxWidth}, { queue:false, duration:400 });
                $("#expand").html("Contract <small style='font-size:12px;'>-</small>");
            }
            else
            {
                $("#slider").animate({height: minWidth}, { queue:false, duration:400 });
                $("#expand").html("Expand <small style='font-size:12px;'>+</small>");
            }
        return false;
    });
});

的CSS：

.map
{
    background-color:green;
}

<div id="slider" class="map">
    <div id="map-canvas">this is a test</div>
</div>

HTML：

<div id="slider-map"><a href="#" id="expand">Expand +</a></div>

适合我。用铬测试;）

JQuery在点击时扩展和收缩div

1 个答案: