[英]How do i make an unordered list show and hide when a different div (menu i created) is clicked?
[英]How do I make a div hide onclick and make it show when it's clicked again?
我有以下代码:
<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
。 使用上面的代码,它将无法正常工作。 我必须怎么做才能做到这一点?
您应该可以将代码更改为如下所示,以使其正常工作:
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
$("#example").slideToggle("slow");
});
});
})(jQuery);
这里是一个快速示例的链接: http : //jsfiddle.net/andyjmeyers/szmXp/
你期望像
<button>This click</button>
<p style="display: none">Example</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
<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>
你可以这样做:
$("#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;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.