html - 在 sweetalert2 内显示不显示和块的表
问题描述
我正在使用 TypeScript 在 sweetalert 中编写 HTML,并且我想在单击列表中的一个项目时显示和隐藏一个表格。我尝试了显示无和显示块,但它不起作用。
我有两个不同的 div,一个 div 有以下列表
'<div class="page" style="display:flex !important; flex-direction:row !important; height:100vh !important;">'+
'<div class="sidebar" style="flex:1 !important; border:solid black 1px !important; height:100% !important;" >'+
'<ul class="list-group">'+
'<li class="list-group-item" for="show"><span>Acceso a Universal</span></li>'+// acceso a universal deberia mostrar la tabla al darle click pero no hace nada ppor lo mismo del style que falta de aplicar.
'<input type="radio" id="show" name="group" style="display: none !important;">'+//creamor un radio para poder seleccionar desde el span
'<li class="list-group-item" for="show1">Carga de Información</li>'+
'<input type="radio" id="show1" name="group" style="display: none !important;">'+
'<li class="list-group-item" for="show2">Reportes</li>'+
'<input type="radio" id="show2" name="group" style="display: none !important;">'+
'<li class="list-group-item" for="show3">Banco de Archivos</li>'+
'<input type="radio" id="show3" name="group" style="display: none !important;">'+
'<li class="list-group-item" for="show4">SITI</li>'+
'<input type="radio" id="show4" name="group" style="display: none !important;">'+
'</ul>'+
'</div>'+
另一个div有下表
'<div id="contenido" style="display:none !important;">'+'<table class="table table-hover mb-0" style="border-collapse: separate !important;hight:border-spacing: 500px 500px!important;" >'+
'<tr style="font-size: 12px !important;text-align:left !important;">'+
'<th>Tipo de Permiso</th>'+'<th>Tipo de Permiso </th>'+'<th>Tipo de Permiso</th>'+'</tr>'+
'<tr style=" font-size: 12px !important; text-align:left !important;"><td>'+accesoUniversal[0]+'</td>'+'<td>'+ accesoUniversal[1] +'</td><td>'+ accesoUniversal[2] +'</td></tr>'+'</table>'+'</div>'+
解决方案
您将需要一个 Javascript 函数来更改display
表的值。某种onChange
使用选中单选按钮值的函数。
Codepen 示例之所以有效,是因为输入和受影响的 DIV 是同级的,因此您可以使用同级组合器~
。没有 CSS 方法可以通过父母向上移动到其他元素。
推荐阅读
- ios - iOS Simulator connection timed out
- python-3.x - PySide2 and pyinstaller gui application won't run on certain windows computers
- r - Get object and indices from subsetting call
- java - 访问外部类中的静态变量时静态内部线程的问题
- android - Calculate sum of recyclerview item double values
- asp.net - 在 MVC 编辑视图中将模型值设置为 CKeditor
- python - Cython 中的枚举成员名称重复 - 重新声明错误?
- azure - 如何在 ServiceBus 消息头中发送/接收数据
- php - 通过 phpmailer 发送巨大的 html 邮件
- node.js - 动态更改用户为 SPA (node.js) 实时提供的 html