如何在增量+选项（或可见性）上实现javascript的可视性

问题描述：

我想在我的脚本中增加一个增量+选项。逐一扩展。如何在增量+选项（或可见性）上实现javascript的可视性

假设点击Optiontional配置后+比网络配置将与另一+选项扩大，现在如果我希望再输入比我会点击+和邻居配置将扩大。

请帮我不要这个，我是新的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>

您的当前脚本究竟有什么问题？如果可能的话你可以创建一个jsfiddle并在那里复制你的问题.http：//jsfiddle.net – dreamweiver

在我的脚本输入选项扩展是所有在一起..我想递增...一个接一个... – Rajendra

你可以发布'样式.css'在这里 – dreamweiver

答

在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库，然后避免香草编写代码的JavaScript，除非你需要的东西，这是在jQuery中不可用[I个人迄今没有遇到过]。
使用class选择器来应用通用/通用css样式，而不是创建单独的id选择器样式。基本上这将防止跨多个规则集的冗余css样式

感谢您的详细解释....它的工作非常好。 – Rajendra

@Raj：您的欢迎，现在您可以通过勾选上述解决方案作为答案来关闭此问题。快乐编码:) – dreamweiver

如何在增量+选项（或可见性）上实现javascript的可视性

相关推荐