题
下面是我正在使用的代码
$(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>
显示和隐藏的工作完全正常。 Blargh是隐藏在浏览器中打开,我可以显示和隐藏,但点击链接。我的问题寿,是当我点击切换,如果简单地滑开,显示blargh,然后滑动自动关上。我可以单击它多次,我想和它做同样的事情。如何获取表明它留下来,然后再次单击它来隐藏它?
解决方案
$('a#slick-toggle').click(function() {
$('#slickbox').is(":visible") ? $('#slickbox').hide("fast") : $('#slickbox').show("slow");
return false;
});
或者你可以触发显示/隐藏绑定的点击,这样你就不用改变如果你决定改变动画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