实际上，我正在尝试在单个行内创建一个表格，一个小型动画加载器将动态地出现在 Laravel Blade 中，如果我在行内单击，动画加载器将显示在特定行中心点内。但是，当我单击行内部时，动画加载器显示在表标题中，这是我想要解决问题的主要问题，现在我面临着解决此问题的问题。我该如何解决这个问题请帮助我？$('.accordian-body').on('show.bs.collapse', function () { $(this).closest("table") .find(".collapse.in") .not(this) .collapse('toggle') }) function getVariation(){ $.ajax({ type: "post", url: "{{url('get-ebay-variation')}}", data: { "_token" : "{{csrf_token()}}", }, beforeSend: function () { $('#product_variation_loading').show(); }, complete: function () { $('#product_variation_loading').hide(); } }) }.variation_load { position: fixed; width: 100%; display: flex; align-items:center; justify-content: center; z-index: 999;}.variation_load_tr{ position: relative;}.variation_load{ position: absolute;}.spin_loading { display: flex;}.spin_loading .dot { position: relative; width: 2em; height: 2em; margin: 0.8em; border-radius: 50%;}.spin_loading .dot::before { position: absolute; content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; animation: wave 2s ease-out infinite;}.spin_loading .dot:nth-child(1) { background: #7ef9ff;}.spin_loading .dot:nth-child(1)::before { animation-delay: 0.2s;}.spin_loading .dot:nth-child(2) { background: #89cff0;}.spin_loading .dot:nth-child(2)::before { animation-delay: 0.4s;}.spin_loading .dot:nth-child(3) { background: #4682b4;}.spin_loading .dot:nth-child(3)::before { animation-delay: 0.6s;}.spin_loading .dot:nth-child(4) { background: #0f52ba;}.spin_loading .dot:nth-child(4)::before { animation-delay: 0.8s;}.spin_loading .dot:nth-child(5) { background: #000080;}.spin_loading .dot:nth-child(5)::before { animation-delay: 1s;}@keyframes wave { 50%, 75% { transform: scale(2.5); } 80%, 100% { opacity: 0; }}
1 回答
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
检查一下，您的代码有几个问题。希望这会有所帮助。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div style="margin-top: 40px;">
<table style="border-collapse:collapse;">
<thead>
<th>Id</th>
<th>Catalogue ID</th>
<th>Product Name</th>
<th>Catagory</th>
<th>Account</th>
</thead>
<tbody>
<tr class="variation_load_tr" style="cursor: pointer;" data-toggle="collapse" onclick="getVariation(this,0)" data-target="#demo1" class="accordion-toggle">
<td>
<div id="product_variation_loading0" class="variation_load" style="display: none;">
<div class="spin_loading">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
15424181
</td>
<td>13463</td>
<td>DIESEL BLACK GOLD JIPLAID Mens Parka</td>
<td>Clothing, Shoes & Accessories>Men>Men's</td>
<td>Topbrand</td>
</tr>
<!--hidden row -->
<tr>
<td colspan="13" class="hiddenRow" style="padding: 0; background-color: #ccc">
<div class="accordian-body collapse" id="demo1">
<table>
<thead>
<tr>
<th>SKU</th>
<th>start Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>B7-1306</td>
<td>20.99</td>
<td>3</td>
</tr>
<tr>
<td>B7-1307</td>
<td>20.99</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<!--end hidden row -->
<tr data-toggle="collapse" style="cursor: pointer;" onclick="getVariation(this,1)" data-target="#demo2" class="accordion-toggle">
<td>
<div id="product_variation_loading1" class="variation_load" style="display: none;">
<div class="spin_loading">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
15424182
</td>
<td>13464</td>
<td>DIESEL BLACK GOLD JIPLAID Mens </td>
<td>Clothing, Shoes & Accessories>Men>Men's</td>
<td>Topbrand</td>
</tr>
<!--hidden row -->
<tr>
<td colspan="13" class="hiddenRow" style="padding: 0; background-color: #ccc">
<div class="accordian-body collapse" id="demo2">
<table>
<thead>
<tr>
<th>SKU</th>
<th>start Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>B7-1308</td>
<td>129.99</td>
<td>1</td>
</tr>
<tr>
<td>B7-1309</td>
<td>129.99</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<!--end hidden row -->
</tbody>
</table>
</div>
$('.accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
function getVariation(obj,id){
$('.variation_load').hide();
$.ajax({
type: "post",
url: "{{url('get-ebay-variation')}}",
data: {
"_token" : "{{csrf_token()}}",
},
beforeSend: function () {
$('#product_variation_loading'+id).show();
},
complete: function () {
$('#product_variation_loading'+id).hide();
}
})
}
https://jsfiddle.net/9ej32fpw/2/
添加回答
举报
0/150
提交
取消