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

    $(".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>