隐藏显示的div
我只是改善安德鲁先生的代码:
$(document).ready(function() {
$("#setup").click(function() {
$("#closeable").slideToggle(function() {
if ($(this).is(":visible")) {
$("#setup").text("Hide Content ▲");
}
else {
$("#setup").text("Show Content ▼");
}
});
});
});
如果您希望它最初不可见,您可以简单地将style="display:none"
添加到<div>
元素。
打我给它。 +1 – hookedonwinter 2011-04-20 23:06:59
$(document).ready(function() {
$("#closeable").slideToggle();
state = "hide";
$("#setup").click(function() {
$("#closeable").slideToggle();
if (state == "hide") {
$("#setup").text("Show Content");
state == "show"
}
else {
$("#setup").text("Hide Content");
state == "hide"
}
});
});
如何:
$(document).ready(function() {
$("#setup").click(function() {
$("#closeable").slideToggle(function() {
if ($(this).is(":visible")) {
$("#setup").text("Hide Content");
}
else {
$("#setup").text("Show Content");
}
});
});
});
一定要检查在回调函数的内容的可见性(以确保内容是可见的)。
谢谢Andrew的帮助 – 422 2011-04-21 00:40:52
@ 422:没问题!乐意效劳。 – 2011-04-21 00:41:27
好吧,我测试了,这是什么工作。
请注意,我们在ready()函数的开头添加了$("#closeable").hide();
,因此隐藏了我们的对象div。
其次我们在测试后移动$("#closeable").slideToggle();
。您遇到的问题是slideToggle()
作为线程执行,并且代码的其余部分仍在执行,因此它仍然部分可见或仅对is(':visible')
语句可见。首先通过测试,我们消除竞争条件。
干杯
$(document).ready(function() {
$("#closeable").hide();
$("#setup").click(function() {
if($("#closeable").is(":visible")) {
$("#setup").text("Show Content ▼");
}
else {
$("#setup").text("Hide Content ▲");
}
$("#closeable").slideToggle();
});
});
谢谢很好的解释:) – 422 2011-04-21 00:13:11
我的问题是如何显示$(“#setup”).text(“Hide Content&#x25B2;”);在JS中向上和向下箭头指针,没有实际发布图像,因为它指出字符编码会丢失? – 422 2011-04-21 00:10:44
为了使用这个\ u25b2,下来使用这个\ u25bc,[现场演示](http://jsfiddle.net/de4FE/43/)。 – SIFE 2011-04-21 01:59:24
感谢SIFE,这是血腥的完美!!!!!!许多thnaks – 422 2011-04-21 03:28:52