会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132387个问题
JAVA 全系列/第三阶段:数据库编程/SQL 语言 3737楼
Python 全系列/第二阶段:Python 深入与提高/游戏开发-坦克大战 3738楼
Python 全系列/第一阶段:Python入门/函数和内存分析 3740楼
JAVA 全系列/第三阶段:数据库编程/Oracle 数据库的使用 3741楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 3744楼

老师为啥我方案一 我click事件绑定在li标签的 为啥离开了li标签 存内容的div就会向上收起

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../Css/初始化.css">
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        .container {
            width: 800px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .container ul{
            list-style: none;
        }
        .container ul li{
            border-bottom: 1px dotted black;
        }
        .container ul li h3{
            position: relative;
            background-color: skyblue;
        }
        .container ul li h3 span{
            position: absolute;
            right: 6px;
        }
        .count{
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <h3>看!2021中国经济新气象<span>></span></h3>
                <div class="count">
                    2021年,是党和国家历史上具有里程碑意义的一年!
                    这一年,我国经济发展保持全球领先地位,国家战略科技力量加快发展,产业链韧性和优势得到提升,改革开放向纵深推进,民生保障有力有效,生态文明建设持续推进。
                    这一年,我们从容应对百年变局和世纪疫情,奋力完成改革发展艰巨任务,实现“十四五”良好开局。
                </div>
            </li>
            <li>
                <h3>拜登“吃不了亏的把戏”,被识破了<span>></span></h3>
                <div class="count">
                     据塔斯社莫斯科12月8日报道,普京和拜登7日举行视频双边会谈。
                    双方确认两国在网络安全和战略稳定问题上取得进展,但就乌克兰问题的讨论谈不上具有建设性。俄罗斯国际事务理事会主任安德烈·科尔图诺夫在访谈中表达了上述观点。
                </div>
            </li>
            <li>
                <h3>最严“防沉迷”实施百天:未成年人卸载退游,租号产业受挫<span>></span></h3>
                <div class="count">
                     网友称之为“史上最严防沉迷”政策的实施,让亚楠有些沮丧。这项由国家新闻出版署发布,
                    防止未成年人沉迷网络游戏的通知,明确要求了自2021年9月1日起,所有网络游戏企业仅能在周五、周六、周日和法定节假日的晚8时至晚9时向未成年人提供1小时的服务。
                </div>
            </li>
            <li>
                <h3>以前啃老如今啃小:萌娃网红沦为父母赚钱机器<span>></span></h3>
                <div class="count">
                    在短视频行业,这样的网红萌娃账号并不在少数,其中大部分是记录日常生活或做育儿科普
                    ,少数剑走偏锋,比如无节制喂食、引导孩子说成人“毒鸡汤”等。近期,据央视新闻报道,小红书中还出现了对未成年人隐私部位拍摄的短视频。
                </div>
            </li>
        </ul>
    </div>
    <script>
        //方案一
        // $lis=$('.container ul li');
        // $lis.click(function(){
         
        //     $(this).find('.count').fadeIn();
        //     console.log($(this).height());
        // });
        // $lis.mouseout(function(){
        //    $(this).find('.count').fadeOut()
        // });

        //方案二
        $lis=$('.container ul li');
        $lis.click(function(){
            console.log(1111);
            if($(this).find('.count').is(':visible')){          
                $(this).find('.count').slideUp();
                $(this).siblings().find('.count').slideUp();
                $(this).find('span').html('>');
            }else{
                $(this).siblings().find('.count').slideUp();
                $(this).find('.count').slideDown();
               
                $(this).find('span').html('<');
            }
        })
       
    </script>
</body>

</html>


WEB前端全系列/第三阶段:jQuery编程模块/jQuery应用(旧) 3745楼

对象1.png

Python 全系列/第一阶段:Python入门/编程基本概念 3746楼
JAVA 全系列/第二十一阶段:Spring Cloud Alibaba技术栈/Nacos 3747楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637