0

我正在尝试使用 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 地图 API，看看这是否是罪魁祸首，但它仍然无法正常工作。

任何帮助将非常感激

4

1 回答 1

0

您忘记关闭 $(document).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>

为我工作。在 chrome 中测试;)

于 2012-11-02T10:43:23.340 回答