jQ简单实现点击隐藏与显示内容

最新推荐文章于 2024-05-13 02:31:53 发布
最新推荐文章于 2024-05-13 02:31:53 发布
阅读量1.5k 收藏 2
点赞数 1
文章标签： javascript css

转载来自：http://www.qdfuns.com/notes/18090/2dc0c084c0e3559eb3d8033a964678d6.html



<!Doctype html>
    
<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>

        <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript">
       $(document).ready(function(){
         $(".main").click(function(){
           $(".main-list").toggle();
          var show =  $("#show").html();
                         if(show == "隐藏")
                         {
                                 $("#show").html("展开");
                         }
                         else
                         {
                                 $("#show").html("隐藏");
                         }
          });
        });
  </script>
  <style type="text/css">
       li { list-style: none; }
       .box {
               width: 300px;
               height: 200px;
               border: #333 1px solid;
       }
       .main {
               width: 60px;
               height: 30px;
               background: #666;
               color: #fff;
               line-height: 30px;
               text-align: center;
       }
       .main-list {
               color: #333;
        display: none;
       }
  </style>

        </head>
<body>
        <ul class="box">
                <li class="main" id="main"><span id="show">隐藏</span>
                        <ul class="main-list" id="main-list">
                                <li>22</li>
                                <li>22</li>
                                <li>22</li>
                        </ul>
                </li>
        </ul>
</body>
</html>


比音
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用JQ实现显示以及隐藏功能
qq_57754812的博客
07-28 3699
使用JQ实现显示隐藏功能 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： JQ 撰写时间：2021/7/28 注意红色箭头指向内容，本文将分为4张图片，并按从上到下顺序操作 1.我们先简单看看效果。 2.浏览器打开，点击隐藏或者显示按钮就能看到隐藏或者显示的效果。 3.开始，我们要通过script标签引入jquery-1.11.1.mi...
jquery和js实现对div的隐藏和显示方法
12-01
在网页开发中，经常需要对页面元素进行动态操作，如隐藏和显示，以实现交互效果。本篇文章将详细探讨如何使用jQuery和JavaScript实现对div元素的隐藏和显示方法。 首先，我们来看jQuery库中的方法。jQuery是...
jquery实现点击显示与隐藏及点击其它区域隐藏
哈啰沃尔德的博客
05-24 3377
$(document).click(function(e){ if (!$(e.target).is('所点击的元素')){ var e = e || window.event; var elem = e.target || e.srcElement; while (elem) { if (elem.classNa...
jq模拟音乐播放器
dx_zheng的博客
01-31 562
点击播放器暂停音乐，播放器停止在当前动画，再次点击开始播放，播放器继续旋转。 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)
最新发布
2401_84150206的博客
05-13 1005
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jquery实现点击标题显示内容，同级其他元素内容隐藏
qq_44162778的博客
08-18 1233
jquery实现点击标题显示内容，同级其他元素内容隐藏。
jQuery效果（隐藏和显示）
shao_xuan_的博客
01-05 7263
jQuery效果解析隐藏和显示hide()和show()jQuery toggle()淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法jQuery fadeToggle() 方法jQuery fadeTo() 方法滑动jQuery slideDown() 方法jQuery slideUp() 方法jQuery slideToggle() 方法自定义动画jQuery animate() 方法停止动画jQuery stop() 方法 隐藏和显示 hide()和show() hi
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
12-11
我们应该给用户足够的选择权，当他们想要看某些内容的时候可以很快的看到，不想看的时候就把他隐藏。于是就有了题目说的这个问题。其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另...
极简单高效兼容jquery两个按钮点击隐藏或显示两个不同对象_jmjjp制作整理
01-24
按钮点击隐藏显示 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> #object1, #object2 { display: none; /* 初始化对象为隐藏状态 */ } 显示对象1 显示对象2 这是对象1 这是...
JQuery DIV 动态隐藏和显示的方法
10-22
总结起来，JQuery 的 DIV 动态隐藏和显示方法是通过`show()`、`hide()`或`toggle()`函数结合事件处理来实现的。这种方法使得开发者可以轻松地控制网页元素的可见性，提高网页的交互性和用户体验。在实际项目中，可以...
js,jq,css多方面实现简易下拉菜单功能
10-19
本篇文章将探讨如何利用JavaScript (js), jQuery (jq) 和 CSS 多方面实现简易下拉菜单功能。 首先，我们从HTML结构开始。在提供的代码片段中，可以看到一个`<ul>`元素作为主菜单容器，包含若干个`<li>`元素，每个`...
jQuery实现点击显示和隐藏内容
08-08 5072
先上效果图点击前 点击后展开 html代码<div id="tips" class="center-block"> <h5 class="tips_head"> <u>遇到问题？</u> </h
jq点击切换隐藏显示
qq_35606790的博客
06-17 5797
先引入jquery.js 点击自动切换显示或隐藏 .hidden { display:none; } .block { display:block; } <button style="display:none;"></button>/默认隐藏* */ <p>123456789</p> 在加入代码： <script ty...
jq中三种显示及隐藏方法
Mrzhaoplus的博客
11-12 2904
div{     width: 450px;     height: 200px;     background: red;     display: none;    }                /*     *整个方法最主要的就是fadein(),fadeout()显示及隐藏的方法，     * */    $(function(){     //点击显示时让
使用jq实现tab切换
cbat的博客
08-08 1万+
使用jq实现tab切换，效果如下 完整代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style type="text/css"> #box{ ...
用jquery怎么实现点击显示，再一次点击隐藏
热门推荐
Belores的博客
12-18 3万+
//点击a标签，轮流显示和隐藏 点击这里 $(function(){ $('#lol').click(function(){//点击a标签 if($('#timo').is(':hidden')){//如果当前隐藏 $('#timo').show();//那么就显示div }else{//否则 $('#timo').hide();//就隐藏div }
css与jq中的显示与隐藏
火星男孩的分享空间
04-07 1072
CSS Display(显示) 与 Visibility（可见性） display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。 vi
jq代码实现table表单内容的隐藏
06-10
你可以使用以下jq代码实现table表单内容的隐藏： ```javascript $(document).ready(function(){ // 隐藏所有表格行 $("table tr").hide(); // 显示表格标题行 $("table tr:first-child").show(); // 表格标题行添加点击事件 $("table tr:first-child").click(function(){ // 显示/隐藏相关的表格行 $(this).nextAll("tr").toggle(); }); }); ``` 该代码会隐藏所有的表格行，然后显示表格的标题行。当用户点击标题行时，相关的表格行会显示或隐藏。注意，该代码只适用于单个表格，如果页面中有多个表格，需要根据具体情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值