仅显示当前选择性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>
                                        <div class="col-md-4">
                                            <h6>
                                                <?php echo $comp_post_info['saly'] ?> 
                                                <p><small> Saly</small></p>
                                            </h6>       
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!----lowerdiv--->
            <div class="lowerdiv container-fluid  hideme" id="mydiv" >
                <div class="row pt-4 padl-5">
                    <h6>Other Prepositions <small>for gle</small></h6>
                </div>
                <div class="row">

                    <div class="col-md-11 offset-md-1">
                        <div class="container-fluid">
                            <div class="row sub_lowerdiv pt-2">
                                <div class="col-md-4">
                                    <i class="fa fa-circle"></i>
                                    <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['count'] ?> 
                                        <p><small>Location</small></p>
                                    </h6>   
                                </div>
                                <div class="col-md-4">
                                    <h6>
                                        <?php echo $comp_post_info['saly'] ?> 
                                        <p><small>Saly</small></p>
                                    </h6>       
                                </div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
            <?php
                }
            ?>      

​

** <script> 
        $(document).ready(function(){                           
        $(".upperdiv").on("click",function(){
            var currentselect = $(this).('.lowerdiv');
          $(".lowerdiv").not(currentselect).hide();
          currentselect.show();
            });
        });


</script> **

在此处输入代码

Answer 1

使用closest查找父类(我添加了父类.parent-div)，然后使用nextAll查找第一个lowerdiv。

请看下面的代码片段：

​

$(document).ready(function(){                           
    $(".upperdiv").on("click",function(){
        var currentselect = $(this).closest(".parent-div").nextAll('.lowerdiv').first(); /* Look I've added find */
        $(".lowerdiv").not(currentselect).hide();
        currentselect.show();
    });
});

.lowerdiv{
  display: none;
  margin-left: 15px;
}

.upperdiv{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-div container-fluid">
  <div class="row">
    <div class="upperdiv">
      Upper 1
    </div>
  </div>
</div>
<div class="lowerdiv">
  Lower 1
</div>
  
<div class="parent-div container-fluid">
  <div class="row">
    <div class="upperdiv">
      Upper 2
    </div>
  </div>
</div>

<div class="lowerdiv">
  Lower 2
</div>
  
<div class="parent-div container-fluid">
  <div class="row">
    <div class="upperdiv">
      Upper 3
    </div>
  </div>
</div>

  <div class="lowerdiv">
     Lower 3
  </div>

​