隐藏/显示待办事项列表中的不同内容，并使用JavaScript一次显示一个内容

Question

我正在使用laravel框架构建这个web，我不擅长js技巧，因为我需要列出todo标题，但当用户点击它们时，它会显示自己的内容。到目前为止，它只适用于最后一个。

<div class="container-fluid">
<h1>Painted List <a href="/create" class="text-success"><i class="fa fa-plus"></i></a></h1>
<ul>
@if(count($paints) > 0)
@foreach($paints as $paint)
<li onclick="myFunction()"><span><i class="fa fa-trash"></i></span> {{ $paint->title }}</li>
<div class="card-body" id="contentBody">
<p class="content"> {{$paint->content}} </p>
</div>
<script>
function myFunction() {
var x = document.getElementById("contentBody");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
@endforeach
@else
<li><span><i class="fa fa-trash"></i></span> No Paint yet!</li>
@endif
</ul>
</div>

这是我的代码我希望有人能帮助我使用CSS, javascript和HTML来显示和隐藏

作为一个帮助，现在它显示内容时点击，但不是一次一个内容在这张照片显示，我已经点击了两个标题和所有内容从两个标题显示，但这不是我想要的

Answer 1

把onclick放到div inside<允许返回父><光>并将card-body元素放入<和使用&>为了避免重复。

试试这个:

<div class="container-fluid">
<h1>Painted List <a href="/create" class="text-success"><i class="fa fa-plus"></i></a></h1>
<ul>
@if(count($paints) > 0)
@foreach($paints as $paint)
<li>
<div onclick="myFunction(this)"><span><i class="fa fa-trash"></i></span> {{ $paint->title }}</div>
<div class="card-body" id="contentBody">
<p class="content"> {{$paint->content}} </p>
</div>
</li>
@endforeach
<script>
function myFunction(el) {
var p = el.parentNode; // return from div you clicked it to <li>
var x = p.querySelector('.card-body');  // find card-body
//var x = document.getElementById("contentBody");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
@else
<li><span><i class="fa fa-trash"></i></span> No Paint yet!</li>
@endif
</ul>

最好的和简单的方法是使用JQuery，它只需要几行就可以完成工作，因为Laravel讨厌内脚本，因为它在安全性方面非常敏感。

$('.non').on('click', function(e){
if (e.target.nextElementSibling.style.display === "none") {
$('.contentBody').hide()
e.target.nextElementSibling.style.display = "block";
} else {
e.target.nextElementSibling.style.display = "none";
}
})

我的朋友过来，砰的一声看到我悲伤的脸，然后奇迹发生了，只有Js clipless能理解