我有兩個 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>
1 回答
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
使用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>
- 1 回答
- 0 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消