JQuery with .toggle .css

Question

私は200 pxを表示するdivがあります。 divの画像をクリックすると、1000pxを表示します。 もう一度クリックするともう一度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

を切り替えるため

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

を使用しています。

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

説明：代替のクリックで実行することが、マッチした要素への2つの以上のハンドラをバインド。

toggleは一度呼び出す必要があります。交互にクリックするとトリガするクリックハンドラをバインドします。あなたがしているのは、クリックするたびにクリックハンドラを再バインドすることです。あなたbecuase

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

Answer 2

使用CSSの異なるスタイルや幅や高さのクラスか何か

とあなたがtoggleを悪用されているすべてのスタイル

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（）は、誰かが要素をクリックしようとしていると仮定します。ドキュメントの説明を参照してください： "代替のクリックで実行される、一致する要素に2つ以上のハンドラをバインドする"ただ、うん、あなたtoggle機能が正しくない

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

Answer 5

...（.clickを除外）とあなたが望む行動を取得します。ここでは作業例です：

http://jsfiddle.net/LsdUQ/