JQuery с .toggle .css

Question

У меня есть div, который показывает 200 px. Когда я нажимаю на изображение в div, я хочу показать 1000 пикселей. Затем снова нажмите 200px при повторном нажатии.

Это мой код:

<script type="text/javascript"> 
$(document).ready(function() { 
    // shows the slickbox DIV on clicking the link with an ID of "slick-show" 

$('#slickbox').css("height", "200px");  
$('#slick-show').click(function() { 
     $('#slickbox').toggle(function() { 
    $("#slickbox").css("height", "1000px"); 
}, function() { 
    $("#slickbox").css("height", "200px"); 
     }); 
}); 
return false; 

}); 
</script> 

<div id="slickbox" style="height: 1000px;"> 
<p style="text-align: center;"> 
<a id="slick-show" href="#"><img src="/ImageVaultFiles/id_468115/cf_69211/Happy_monday14-5.jpg" border="0" alt="Happy_monday14-5" /></a></p> 
</div> 

код работает, но я должен дважды щелкнуть каждый раз после первого открытия.

Answer 1

вы злоупотребляете toggle.

http://api.jquery.com/toggle-event/

Описание: Привязка два или более обработчиков к соответствующим элементам, должны быть выполнены на альтернативных щелчках.

toggle следует называть только один раз. Он привяжет обработчики кликов, которые будут запускаться при чередовании кликов. То, что вы делаете, - перевязывать обработчики кликов каждый раз, когда вы нажимаете. То, что вы действительно хотите сделать что-то вроде этого:

$('#slickbox').css("height", "200px");  
$('#slick-show').toggle(function() { 
    $("#slickbox").css("height", "1000px"); 
}, function() { 
    $("#slickbox").css("height", "200px"); 
}); 

Answer 2

Используйте класс CSS для различных стилей или ширины или высоты или что-нибудь

, а затем использовать

http://api.jquery.com/toggleClass/

для переключая любой стиль

Answer 3

это, потому что вы приложите тумблер функции после щелчка на элементе, избежать .click:

$(function() { 
     // shows the slickbox DIV on clicking the link with an ID of "slick-show" 

    $('#slickbox').css("height", "200px");  
    $('#slick-show').toggle(function() { 
     $("#slickbox").css("height", "1000px"); 
    }, function() { 
     $("#slickbox").css("height", "200px"); 
      }); 
    }); 

Answer 4

В .click() и .toggle() являются избыточными - .toggle() предполагает, что кто-то будет нажимать на элемент. См. Описание в документах: «Привязать два или более обработчиков к согласованным элементам, которые будут выполняться на альтернативных кликах». Просто оставить из .click(), и вы получите поведение, которое вы хотите ..

$(document).ready(function() { 
    $('#slickbox').css("height", "200px"); 
    $('#slick-show').toggle(function() { 
     $("#slickbox").css("height", "1000px"); 
    }, function() { 
      $("#slickbox").css("height", "200px"); 
     }); 
})​ 

Answer 5

Да, ваша toggle функция неверна. Вот рабочий пример:

http://jsfiddle.net/LsdUQ/