Question

我想在我的脚本中使用增量 + 选项，例如。一个接一个的扩张。

假设点击选项配置 + 后，网络配置将使用另一个 + 选项进行扩展，现在如果我想要其他输入，我将点击 + 和邻居配置将展开。

请不要帮助我，我是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>

Answer 1

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

我也更新了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的可见性

1 个答案: