gpt4 book ai didi

javascript - 如何使用增量+选项(或可见性)在javascript上实现可见性

转载 作者:行者123 更新时间:2023-11-28 06:24:43 25 4
gpt4 key购买 nike

我想在我的脚本中增加一个 + 选项,例如。一一展开。

假设点击 Optional Configurations + 之后 Network Config 将用另一个 + 选项展开,现在如果我想要另一个输入而不是我将点击 + Neighbor Config 将被扩展。

请帮帮我,我是 javascript 的新手,在此先感谢。

<html>
<h>OPSF Configuration</h>
</br>
<head>
<script type="text/javascript">
function defaultconf() {
var nodes = document.getElementById("d1").getElementsByTagName('*');
for(var k = 0; k < nodes.length; k++)
{
nodes[k].style.visibility ="hidden";
}
}

function options1() {
var str = arguments[0];
var nodes = document.getElementById(str).getElementsByTagName('input');
for(var i = 0; i < nodes.length; i++)
{
nodes[i].style.visibility ="hidden";
}
var nodes = document.getElementById(str).getElementsByTagName('button');
var name = document.getElementById(str).getElementsByTagName('label');
for(var i = 0; i < nodes.length; i++)
{
if (nodes[i].style.visibility == "hidden" || name[i].style.visibility == "hidden")
{
nodes[i].style.visibility ="visible";
name[i].style.visibility ="visible";
}
else
{
nodes[i].style.visibility ="hidden";
name[i].style.visibility ="hidden";
}
}

}

function options() {
var str = arguments[0];
var nodes = document.getElementById(str).getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++)
{
if (nodes[i].style.visibility == "hidden")
nodes[i].style.visibility = "visible";
else
nodes[i].style.visibility ="hidden";
}
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<body onload="defaultconf()">
<br/>
<input type="button" value="+" onclick="options('d1')">Optiontional Configurations </td></tr>
<div id="d1">
<table>
<br/>
<tr><td>
<input type="button" value="+" onclick="options('network')">Network Config
<div id="network">
<table>
<tr>
<td class="style11" valign=top style="height: 4px">Network</td>
<td class="style9" style="height: 4px">
<input type="text" value="<?php echo $network?>" name="network" size="2" style="width: 147px">
</td>
</tr>
</table>
</div>
</td></tr>



<tr><td>
<br/>
<input type="button" value="+" onclick="options('neighbor')">Neighbor Config
<div id="neighbor">
<table>
<tr>
<td class="style11" valign=top style="height: 4px">Neighbor IP</td>
<td class="style9" style="height: 4px">
<input type="text" value="<?php echo $neighbor?>" name="neighbor" size="2" style="width: 147px">
</td>
</tr>
</table>
</div>

</td></tr>
</table>
</div>
</body>
</html>

最佳答案

jquery 中的简单解决方案是使用 .toggle() 来切换 subview 。

我还更新了 DOM 结构。

jQuery 代码:

$(function() {
var siblingCounter = 0;
$('.sub-view').hide();
$('.main-view').on('click', function() {
var localCounter = $(this).hasClass('default') ? siblingCounter++ : 0;
$(this).siblings('.sub-view').eq(localCounter).toggle();
});
});

Live Demo @ JSFiddle

注意:

  • 如果您正在使用 jQuery 库,那么请避免使用 vanilla javascript 编写代码,除非您需要的东西在 jQuery 中不可用[到目前为止我个人还没有遇到过]
  • 使用 class 选择器来应用通用/通用 css 样式,而不是创建单独的 id 选择器样式。基本上这将防止跨多个规则集的冗余 css 样式

关于javascript - 如何使用增量+选项(或可见性)在javascript上实现可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35356266/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com