仅显示当前选择性 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>