仅显示当前选择性 div 并使用 jquery 隐藏其他 div

Question

我有两个 div [一个在上 | 第二个较低]。两者都可以从数据库中获取数据并制作相应数量的 div。下层 div 默认隐藏。我想在单击上部 div 时显示下部 div。我制作的 jquery 代码在这里。需要你的帮助。笔记。仅显示当前活动的下级 div。所有其他较低的 div 必须隐藏。去做这个

<!---upper div section--->  

                <?php

                $id=1;

                while ($comp_post_info=mysqli_fetch_array($query)) 

                    {

                    ?>

            <div class="container-fluid">

                <div class="row">

                    <div class="upperdiv container-fluid mb-5">

                        <div class="row">

                            <div class="col-md-1 pdl-3">

                                <i class="fa fa-circle"></i>

                            </div>

                            <div class="col-md-11">

                                <div class="container-fluid">

                                    <div class="row jlist" id="addbg">

                                        <div class="col-md-4">

                                            <img src="/my_brands/brand.png" alt="" class="cust-em">

                                            <h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>       

                                        </div>

                                        <div class="col-md-4">

                                            <h6>

                                                <?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['coun'] ?> 

                                                <p><small>Location</small></p>

                                            </h6>   

                                        </div>

Answer 1

使用closest来查找父级（我已经添加了父类.parent-div），然后使用nextAll来查找第一个lowerdiv。请参阅下面的片段：$(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; $(".upperdiv").on("click",function(){&nbsp; &nbsp; &nbsp; &nbsp; var currentselect = $(this).closest(".parent-div").nextAll('.lowerdiv').first(); /* Look I've added find */&nbsp; &nbsp; &nbsp; &nbsp; $(".lowerdiv").not(currentselect).hide();&nbsp; &nbsp; &nbsp; &nbsp; currentselect.show();&nbsp; &nbsp; });});.lowerdiv{&nbsp; display: none;&nbsp; margin-left: 15px;}.upperdiv{&nbsp; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="parent-div container-fluid">&nbsp; <div class="row">&nbsp; &nbsp; <div class="upperdiv">&nbsp; &nbsp; &nbsp; Upper 1&nbsp; &nbsp; </div>&nbsp; </div></div><div class="lowerdiv">&nbsp; Lower 1</div>&nbsp;&nbsp;<div class="parent-div container-fluid">&nbsp; <div class="row">&nbsp; &nbsp; <div class="upperdiv">&nbsp; &nbsp; &nbsp; Upper 2&nbsp; &nbsp; </div>&nbsp; </div></div><div class="lowerdiv">&nbsp; Lower 2</div>&nbsp;&nbsp;<div class="parent-div container-fluid">&nbsp; <div class="row">&nbsp; &nbsp; <div class="upperdiv">&nbsp; &nbsp; &nbsp; Upper 3&nbsp; &nbsp; </div>&nbsp; </div></div>&nbsp; <div class="lowerdiv">&nbsp; &nbsp; &nbsp;Lower 3&nbsp; </div>