[英]How do I make a div hide onclick and make it show when it's clicked again?
I have this code: 我有以下代码:
<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>
The way the current code works is that if #thisclick
is clicked it hides #example
. 当前代码的工作方式是,如果单击
#thisclick
,则会隐藏#example
。 Which is what I require but when #thisclick
is clicked again i want it to show #example
. 这是我所需要的,但是当再次单击
#thisclick
时,我希望它显示#example
。 Using the above code, it won't work. 使用上面的代码,它将无法正常工作。 What must I do to achieve this?
我必须怎么做才能做到这一点?
You should be able to change your code to as follows to get it to work: 您应该可以将代码更改为如下所示,以使其正常工作:
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
$("#example").slideToggle("slow");
});
});
})(jQuery);
Here is a link to a quick sample: http://jsfiddle.net/andyjmeyers/szmXp/ 这里是一个快速示例的链接: http : //jsfiddle.net/andyjmeyers/szmXp/
Are you expecting like 你期望像
<button>This click</button>
<p style="display: none">Example</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
Please check it on http://jsfiddle.net/X5r8r/1107/ 请在http://jsfiddle.net/X5r8r/1107/上进行检查
<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>
You can do this: 你可以这样做:
$("#thisclick").click(function () {
if ($('#example').hasClass("hidden"))
{
$('#example').removeClass("hidden");
$('#example').show();
}
else
{
$('#example').addClass("hidden");
}
}
or more easily: 或更容易:
$("#thisclick").click(function () {
$('#example').toggleClass("hidden");
}
define style": 定义样式”:
.hidden
{ display:none;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.