javascript - Laravel 5如何通过下拉选择显示,隐藏div
问题描述
问题是如何使用下拉 onclick 功能显示和隐藏 div。
Blockquote 问题 2 是如何通过该样式的编号获取 getElementById("") ;
这是我的 CSS,我不想显示我的所有 div
<style>
#\1a{ display:none; } // to 32...//
</style>
这是我的 JS
<script>
function show(showid){
document.getElementById("1").style.display="none";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
</script>
这是我的下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" >
Bla bla bla
</button>
<ul id="test" name="form_select" class="dropdown-menu">
@foreach ($topics as $topic)
<li><a href="#" onclick="show('')" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
@endforeach
</ul>
</div>
这是我的 div
@foreach($collections as $collection)
<div id="{{ $collection->id }}">
<div class="panel panel-default">
<table border="1" style="width:100%">
<tbody>
<tr>
<td><h4>Асуулт {{ $i++ }}.</h4><strong>{!! nl2br($question->question_text) !!}</strong></td>
</tr>
<tr>
<td><input type="hidden" class="form-control" name="questions[{{ $question->id }}]" value="{{ $question->id }}"></td>
</tr>
@foreach($question->options as $option)
<tr>
<td><label class="radio-inline"><input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}">{{ $option->option }}</label>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
解决方案
落下:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
Bla bla bla
</button>
<ul id="test" name="form_select" class="dropdown-menu">
@foreach ($topics as $topic)
<li><a href="#" onclick="show({{ $loop->index }})" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
@endforeach
</ul>
</div>
我们$loop->index
用作增量值。它们必须等于$collection->id
.
DIV:
@foreach($collections as $collection)
<div id="{{ $collection->id }}" class="topic hidden">
<div class="panel panel-default">
...
</div>
</div>
@endforeach
我添加了类topic
来识别所有divs
(使用任何你想要的)并用hidden
类隐藏所有这些。不需要自定义CSS
。
JavaScript:
function show(id) {
$('.topic').addClass('hidden');
$('#' + id).removeClass('hidden');
}
第一行将类添加hidden
到所有divs
以隐藏它们。第二个删除hidden
特定的类div
。
我jQuery
使用该库是因为您将该库用于Bootstrap
.
这一切都假设
$loop->index
并$collection->id
具有相同的值。如果没有,您可以尝试替换$collection->id
为$loop->index
.
推荐阅读
- c++ - 向量元素的引用地址与其指向的向量元素的地址不同。为什么?
- office365api - 在office365中仅对一个邮箱的Rest Api权限
- php - XAMPP 对密码/盐长度设置有什么特殊要求吗?
- javascript - iOS WKWebview 通过 js 发送 post 请求,从当前网页的 html 中组合请求
- git - 如何将大 gif 放入 github 存储库自述文件?
- python - How to deploy Google Cloud Dataflow with connection to PostgreSQL (beam-nuggets) from Google Cloud Functions
- javascript - 进行 API 调用时,JWT 令牌 exp 的格式很奇怪
- c# - 如何使用 .NET 的 MongoDB 驱动程序的 updateOne() 更新但不替换文档
- gitlab - 带有“规则”的 Gitlab 计划作业未运行且无法触发
- python - 将大灰度 PIL 图像转换为黑色和透明