我在一个表中有一个名称列表，当您单击选定的表行时，手风琴将弹出，但问题是当我单击一个名称时，所有手风琴都将显示...
我只是在每行放置一个类。
<tr data-toggle="collapse" data-target=".dev-info" class="accordion-toggle devs">
<td>
<input type="hidden" class="devID" value="{{$dev->id}}">
<strong>{{$dev->last_name}}</strong>
</td>
<td><strong>{{$dev->first_name}}</strong></td>
<td> <strong>{{$dev->middle_name}}</strong></td>
<td>
<div class="pull-right">
<a href="{{url('profile-view',$dev->id)}}" class="btn btn-primary btn-block viewProfile"><i class="glyphicon glyphicon-user "></i><b>View Profile</b></a>
</div>
</td>
</tr>
<tr>
<td colspan="4" class="hiddentablerow">
<div class="box-group accordian-body collapse dev-info">
<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
<div class="panel box box-info">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Additional Information
</a>
</h4>
<div>
<select class="star-rating">
@foreach($dev->child_user_rating as $rate)
<option value="$rate->rating">{{count($rate->parent_user_rating_desc) > 0 ? $rate->parent_user_rating_desc[0]->description : 'Not Set'}},</option>
@endforeach
</select>
</div>
<input type="hidden" class="devID" value="{{$dev->id}}">
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="box-body">
<strong><i class="glyphicon glyphicon-envelope margin-r-5"></i> Email Address</strong>
<p class="text-muted">{{$dev->email}}</p>
<hr>
<strong><i class="fa fa-map-marker margin-r-5"></i> Location</strong>
<p class="text-muted">{{count($dev->child_user_location) > 0 ? $dev->child_user_location[0]->street : 'Not Set'}},{{count($dev->child_user_location) > 0 ? $dev->child_user_location[0]->brgy : 'Not Set'}},{{count($dev->child_user_location) > 0 ? $dev->child_user_location[0]->city : 'Not Set'}},{{count($dev->child_user_location) > 0 ? $dev->child_user_location[0]->province : 'Not Set'}},{{count($dev->child_user_location) > 0 ? $dev->child_user_location[0]->country : 'Not Set'}}</p>
</div>
</div>
</div>
<div class="panel box box-danger">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Skills
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="box-body">
<strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
<p>
@foreach($dev->child_user_specilization as $skill)
<span class="label label-success">{{$skill->sklill_desc->description}}</span>
@endforeach
</p>
</div>
</div>
<div class="panel box box-success">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Achievements
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="box-body">
<strong><i class="fa fa-file-text-o margin-r-5"></i> Achievements</strong>
<p>
@foreach($dev->child_user_achievement as $achievement)
<span class="label label-success">{{$achievement->name}}</span>
@endforeach
</p>
</div>
</div>
</div>
</div>
</td>
</tr>
我应该使用JQuery过滤数据吗？如果我使用JQuery怎么办？因为纯html具有可切换手风琴的类。
答案 0 :(得分：0)
问题是data-target=".dev-info"将选择所有类为dev-info的元素
您可能想为折叠元素分配一个ID，例如$dev->id，我认为它是唯一的。
所以不是
<div class="box-group accordian-body collapse dev-info">
使用
<div id="dev-info-{{$dev->id}}" class="box-group accordian-body collapse dev-info">
，而不是
<tr data-toggle="collapse" data-target=".dev-info" class="accordion-toggle devs">
使用
<tr data-toggle="collapse" data-target="#dev-info-{{$dev->id}}" class="accordion-toggle devs">
我没有您的代码，所以我做了这个例子
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<table border="1" cellpadding="5" width="50%">
<tr data-toggle="collapse" data-target="#data1" class="accordion-toggle">
<td>Data 1</td>
<td>COL 2</td>
<td>COL 3</td>
<td>COL 4</td>
</tr>
<tr>
<td colspan="4">
<div id="data1" class="box-group accordian-body collapse dev-info">Additional Information for Data 1</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#data2" class="accordion-toggle">
<td>Data 2</td>
<td>COL 2</td>
<td>COL 3</td>
<td>COL 4</td>
</tr>
<tr>
<td colspan="4">
<div id="data2" class="box-group accordian-body collapse dev-info">Additional Information for Data 2</div>
</td>
</tr>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
答案 1 :(得分：0)
解决了他们……
我只是在Jquery中添加它。
$('tr.devs').click(function(){
$(this).nextUntil('tr.devs').css('display', function(i,v){
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});