用jQuery toggle函数控制div显示与隐藏

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_34310785

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量125

点赞数

文章标签： javascript xhtml ViewUI

本文介绍了一个简单的网页交互效果实现方法，通过使用jQuery库，实现了点击按钮来切换DIV元素的显示与隐藏状态。该效果适用于创建简洁的用户界面元素，如隐藏不常用的功能选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canrun

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>点击消失的DIV</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<style>
#adBlock{
    display:block;
    width:200px;
    height:300px;
    border:1px solid;
    float:left;
}
#clickController{
    border: 1px solid #AABBCC;
    display: block;
    float: left;
    height: 80px;
    padding: 1px;
    width: 16px;
}
</style>
<div id="adBlock"></div>
<div id="clickController"><< 点击我</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#clickController").click(function(){        
        ($(this).text()=='>> 点击我')?$(this).text('<< 点击我'):$(this).text('>> 点击我');
        $("#adBlock").toggle(500);
    });
});
</script>
</body>
</html>