我有这段代码:
<script>
(function ($) {
$(document).ready(function () {
$("#thisclick, #thisclick2").click(function () {
if ($('.example').is(":hidden")) {
$(this).html($(this).html().replace(/Hide/, 'Show'));
} else {
$(this).html($(this).html().replace(/Show/, 'Hide'));
}
// Do it afterwards as the operation is async
$(".example").hide();
});
});
})(jQuery);
</script>
当前代码的工作方式是,如果点击#thisclick
,则会隐藏#example
。这是我要求的,但是当再次点击#thisclick
时,我希望它显示#example
。使用上面的代码,它将无法正常工作。我该怎么做才能实现这个目标?
答案 0 :(得分:4)
您应该能够将代码更改为以下内容以使其正常工作:
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
$("#example").slideToggle("slow");
});
});
})(jQuery);
以下是快速示例的链接: http://jsfiddle.net/andyjmeyers/szmXp/
答案 1 :(得分:1)
您是否期待
<button>This click</button>
<p style="display: none">Example</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
上查看
答案 2 :(得分:0)
<script>
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
if ($('#example').is(":hidden")) {
$(this).html($(this).html().replace(/Hide/, 'Show'));
} else {
$(this).html($(this).html().replace(/Show/, 'Hide'));
}
// Do it afterwards as the operation is async
$("#thisclick").slideToggle("slow");
if($("#example").attr("isHidden") == "1")
$("#example").slideToggle("slow");
$("#example").attr("isHidden","1");
});
});
})(jQuery);
</script>
答案 3 :(得分:0)
你可以这样做:
$("#thisclick").click(function () {
if ($('#example').hasClass("hidden"))
{
$('#example').removeClass("hidden");
$('#example').show();
}
else
{
$('#example').addClass("hidden");
}
}
或更容易:
$("#thisclick").click(function () {
$('#example').toggleClass("hidden");
}
定义样式“:
.hidden
{ display:none;}