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>

私のために働きます。クロムでテスト済み;)

于 2012-11-02T10:43:23.340 に答える