[英]Trying to create multiple animated kebab menu with dropdown list not working in Laravel 8
if you need more details you can ask.如果您需要更多详细信息,可以询问。 Thanks in advance In laravel 8 I have a button called, create app when I click it, it takes me to the page adds some data.
提前致谢 在 laravel 8 我有一个按钮,当我点击它时创建应用程序,它会带我到页面添加一些数据。 When i add data it shows me many app lata in listview.
当我添加数据时,它会在列表视图中显示很多应用程序。 In every list view, I have an animated kebab menu
在每个列表视图中,我都有一个动画烤肉串菜单
.
. But the problem is when i create new app dropdown list only works for last enter apps.
但问题是当我创建新的应用程序下拉列表时只适用于最后输入的应用程序。 so it means if i create 10 apps dropdown list will work for only last app i have enterd it will not work for other 9.
所以这意味着如果我创建 10 个应用程序下拉列表将仅适用于我输入的最后一个应用程序,它将不适用于其他 9 个。
here is some code of my index.blade.php which can create multipul kebab menu but not works for dropdown这是我的 index.blade.php 的一些代码,它可以创建 multipul kebab 菜单但不适用于下拉菜单
@foreach ($products as $product)
<div class="col-xs-12 col-sm-12 col-md-12">
{{-- <div class="card-body row"> --}}
<form action="{{ route('products.destroy', $product->id) }}" method="POST">
{{-- <ul class="nav"> --}}
<a class="btn btn-outline-info" href="{{ route('products.edit', $product->id) }}">
<br>
<img src="/logo/{{ $product->logo }}" width="100px" class="col-4">
<div class="col-2" style="color: #1d2124">
<strong >App Name:- {{ $product->name }}</strong>
<br>
<strong>App Id:- {{ $product->id }}</strong>
</div>
</a>
<div class="pull-right">
<div class="kebab">
<figure></figure>
<figure class="middle"></figure>
<p class="cross">x</p>
<figure></figure>
<ul class="dropdown">
@csrf
@method('DELETE')
<li><button type="submit" class="btn btn-danger">Delete</button></li>
<li><a href="api/json_link">All Json</a></li>
<li><a href="api/SearchById">JsonById</a></li>
<li><a href="api/SearchByName">JsonByName</a></li>
</ul>
</div>
</div>
{{-- </ul> --}}
</form>
{{-- </div> --}}
</div>
@endforeach
here is javescript code which can create kabeb menu for all app but dropdown for last inserted app in app.js这是 javescript 代码,它可以为所有应用程序创建 kabeb 菜单,但为 app.js 中最后插入的应用程序创建下拉菜单
require('./bootstrap');
require('alpinejs');
var kebab = document.querySelector(".kebab"),
middle = document.querySelector(".middle"),
cross = document.querySelector(".cross"),
dropdown = document.querySelector(".dropdown");
kebab.addEventListener("click", function() {
middle.classList.toggle("active");
cross.classList.toggle("active");
dropdown.classList.toggle("active");
});
document.querySelector
only returns the last DOM element matching your selector. document.querySelector
仅返回与您的选择器匹配的最后一个 DOM 元素。 If you want to apply a dropdown menu for every kebab, you have to use如果你想为每个烤肉串应用一个下拉菜单,你必须使用
kebabs = document.querySelectorAll(".kebab")
...
kebabs.foreach(this.addEventListener("click", function(){
//do what you want
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.