質問
使用しているコードは次のとおりです
$(document).ready(function(){
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('a#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('a#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});
// toggles the slickbox on clicking the noted link
$('a#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
HTMLコードは次のとおりです。
<div id="slickbox"> BLARGH</div>
<a href="#" id="slick-show">Show</a>
<a href="#" id="slick-hide">hide</a>
<a href="#" id="slick-toggle">toggle</a>
表示と非表示は完全に機能します。ブラウザを開くとブラーは非表示になり、リンクをクリックして表示と非表示を切り替えることができます。私の問題は、トグルをクリックすると、スライドが開いてブラーを表示してからスライドが閉じた場合です。何度でもクリックでき、同じことをします。表示されたままにして、もう一度クリックして非表示にするにはどうすればよいですか?
解決
$('a#slick-toggle').click(function() {
$('#slickbox').is(":visible") ? $('#slickbox').hide("fast") : $('#slickbox').show("slow");
return false;
});
または、show / hideバインディングのクリックをトリガーできます。アニメーションを変更する場合、 a#slick-toggle
の実装を変更する必要はありません。
$('a#slick-toggle').click(function() {
$('#slickbox').is(":visible") ? $('a#slick-hide').trigger("click") : $('a#slick-show').trigger("click");
return false;
});
他のヒント
$('a#slick-toggle').toggle(function() {
$('#slickbox').show();
return false;
}, function() {
$('#slickbox').hide();
});
所属していません StackOverflow