Html 如何使用laravel根据if条件(使用下拉菜单选择)打开引导面板?
我使用了一个下拉片段。根据选择值,应弹出不同的面板。首先阅读可折叠元素: 通读modals文档以及如何与modals交互,因为modals是使用数据属性的良好参考: 您可以仅在以元素id为目标的html元素上使用Html 如何使用laravel根据if条件(使用下拉菜单选择)打开引导面板?,html,laravel-5.4,Html,Laravel 5.4,我使用了一个下拉片段。根据选择值,应弹出不同的面板。首先阅读可折叠元素: 通读modals文档以及如何与modals交互,因为modals是使用数据属性的良好参考: 您可以仅在以元素id为目标的html元素上使用data属性打开它们,或者出于您的需要,我将绑定到下拉列表的onchange事件,并使用JavaScript触发面板显示。一个简单的函数来说明: $('#mydropdown').on('change', function () { $('#' + $(this).data(
data
属性打开它们,或者出于您的需要,我将绑定到下拉列表的onchange
事件,并使用JavaScript触发面板显示。一个简单的函数来说明:
$('#mydropdown').on('change', function () {
$('#' + $(this).data('target').val() ).toggle('collapse');
});
您的下拉列表可能如下所示:
<select id="mydropdown">
<option data-target="panel1">panel 1</option>
<option data-target="panel2">panel 2</option>
<option data-target="panel3">panel 3</option>
</select>
小组1
小组2
小组3
那么一个面板可以是:
<div class="panel panel-default collapse" id="panel1">
<div class="panel-body">
Basic panel example
</div>
</div>
基本面板示例
这是一个非常简单的概述,但应该让您沿着正确的道路开始。如果您愿意,我相信您不必使用JavaScript就可以实现所有这一切。您是指bootstrap 3 panel类,还是要打开一个模式?bootstrap 3 panel类,先生!!