JQuery расширяет и сжимает div по клику

Я пытаюсь использовать 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>

Высота слайдера по умолчанию составляет 300 пикселей в CSS.

Вот 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;
    });
}

Я пробовал это, не вызывая API карт Google в div map-canvas, чтобы посмотреть, было ли это виновником, но это все равно не сработает.

Любая помощь приветствуется


html jquery expand contract
person bananabread_    schedule 02.11.2012    source источник
comment
Применяется ли к #slider overflow: hidden в вашем CSS? Также вам не нужно объявлять новую высоту как maxWidth+px, просто maxWidth в порядке.   -  person svenbravo7    schedule 02.11.2012
comment
Вы забыли правильно закрыть $(document).ready. заменить });   -  person user1534664    schedule 02.11.2012
comment
Не понял, что могу опустить px, спасибо за это, хотя это все равно не сработает. К #slider применяются только стили полей и #slider.map height:300px; ширина:100%;   -  person bananabread_    schedule 02.11.2012
comment
Вау, я чувствую себя глупо, виновата эта отсутствующая скобка. Спасибо!   -  person bananabread_    schedule 02.11.2012
comment
банановый хлеб не был тем, кто упомянул об этом.. o.O   -  person user1534664    schedule 02.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы забыли закрыть $(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>

работает на меня. проверено в хроме ;)

person user1534664    schedule 02.11.2012