如何设置DIV点击事件为可见，再点就隐藏!!！

最新推荐文章于 2023-01-02 15:28:38 发布

原创最新推荐文章于 2023-01-02 15:28:38 发布 · 580 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #html5 #css3 #javascript

这篇博客探讨了JavaScript中如何使用DOM操作实现元素的隐藏和显示。通过点击事件监听`#stayCompleted`元素，动态改变`#wancheng`元素的显示状态。当`#wancheng`被隐藏时，点击会显示它；反之则将其隐藏。博客内容涉及到CSS样式`display:none`和`visibility:hidden`的区别，以及JavaScript的DOM操作技巧。

<div style="display:none"></style>，完全隐藏，不占空间
<div style="visibility:hidden"></style> 不可见，但是还占空间

<div class="muiAttendWorkChartContainer" id="stayCompleted">
    <span>已完成</span>
	<div class="muiAttendExcListMore">
	<i class='fontmuis muis-to-right'></i>
	</div>
</div>
<!--先设置div为隐藏-->
<div style="display:none" id="wancheng">
    <span>已完成的内容</span>
</div>


<!--以下是script代码-->
//已完成
$('#stayCompleted').click(function() {
	var flag = $("#wancheng").is(":hidden");
	if(flag){
	    //show() 方法: 使隐藏的变为显示
	    $("#wancheng").show();
	}else{
	    $("#wancheng").hide();
	}
});