javascript - JQ 点击隐藏显示-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - JQ 点击隐藏显示

伊谢尔伦 2017-04-10 17:38:29

[JavaScript讨论组]

547

<p class="p1">
    <ul>
    </ul>
    <p class='p2'></p>
</p>
<p class="p1">
    <ul>
    </ul>
    <p class='p2'></p>
</p>

点击p1，让p2显示，点下一个p1,让第一个p2隐藏，第二个p2显示，
怎么实现啊

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(5)

天蓬老师2017-04-10 17:40:29 5楼

HTML:

<p class="p1">
    <ul></ul>
    <p class='p2'></p>
</p>
<p class="p1">
    <ul></ul>
    <p class='p2'></p>
</p>

CSS:

.p1 {
    width: 50px;
    height: 50px;
    background: yellow;
}
.p2 {
    width: 40px;
    height: 40px;
    background: red;
    display: none;
}

jQuery:

    $('.p1').click(function () {
       $(this).find('.p2').show()
               .end()
               .siblings('.p1').find('.p2').hide();
    });

仅仅想装B的用链式代码，写法可能有点拖沓。见谅。支持 scort 的写法。

赞 +0

添加回复

高洛峰2017-04-10 17:40:29 4楼

$('.p1').click(function(){
    $('.p2').hide();
    $(this).find('.p2').show();
});

赞 +0

添加回复

大家讲道理2017-04-10 17:40:29 3楼

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <style>
        .p1{
            width: 200px;height: 200px;background: gold;
        }
        .p2{
            width: 100px;height: 100px;background: red;
        }
    </style>
</head>
<body>
<p>
    <p class="p1" id="fisrstp1">
        <p class='p2' id="firstp2">p2</p>
    </p>
    <br><br><br><br><br>
    <p class="p1" id="secondp1">
        <p class='p2' id="secondp2">p2</p>
    </p>
</p>
<script type="text/javascript">
    $(function(){
        $('#fisrstp1').click(function () {
            $('.p2').show();
        });
        $('#secondp1').click(function () {
            $('#firstp2').hide();
            $('#secondp2').show();
        });
    })

</script>
</body>
</html>

不知道是不是你要的

赞 +0

添加回复

PHPz2017-04-10 17:40:29 2楼

如果元素少的话，加个id写动作就是，没必要用同一个class。

赞 +0

添加回复

迷茫2017-04-10 17:40:29 1楼

    <p class="p1 active">
        我是p1
        <p class="p2" style="display: block;">我是p2</p>
    </p>
    <p class="p1">
        我是p1
        <p class="p2" style="display: none;">我是p2</p>
    </p>
    <script type="text/javascript">
        $(function(){
            $(document).on('click','.p1',function(){
                /*逻辑就是给当前显示的p1加上active，并展示当前点击的p1下的p2*/

                /*当然也可以直接使用css规定.p.active>.p2{display:block;}*/

                //检测点击的是否已经显示
                if(!$(this).hasClass('active')){
                    //点击的p1没有active
                    //去掉active并隐藏p2
                    $('.active').removeClass('active').find('.p2').hide();

                    //激活当前点击p1
                    $(this).addClass('active').find('.p2').show();
                };
            });
        }());
    </script>

写好了总要贴上来

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>