当用户点击一个链接时隐藏/显示表单的元素

Question

我有一个带有一些输入文本和单选按钮的表单，当用户点击表单的其他元素时，以及当用户点击再次，隐藏它们。我怎样才能做到这一点？我认为jquery会做这个想法，但我不是一个JavaScript开发人员，所以我需要一些指导，非常感谢！

Answer 1

下面是一个例子。如果你有以下的html：

<p>Click on the gray 'button' below.</p> 
<div id="ThingOne"> 
    Hi, I'm thing one! 
    <div id="ButtonOne" style="background-color: Gray; width: 100px">Show Thing Two</div> 
</div> 

<div id="ThingTwo"> 
    Hello, I'm thing two! 
    <div id="ButtonTwo" style="background-color: Gray; width: 100px">Show Thing One</div> 
</div> 

然后你可以使用下面的jquery。

<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#ButtonOne").click(function() { 
      $("#ThingTwo").fadeIn("slow"); 
      $("#ThingOne").fadeOut("slow"); 
     }); 

     $("#ButtonTwo").click(function() { 
      $("#ThingOne").fadeIn("slow"); 
      $("#ThingTwo").fadeOut("slow"); 
     }); 

     $("#ButtonOne").click(); 

    }); 

</script> 

请注意对.click（）的调用，它会在第一次执行时隐藏ButtonTwo div。另外，您需要根据需要更新对JQuery库的引用。希望这可以帮助！

Answer 2

如果这是你的超级链接：<a id="hideshowlink">Link</a>

绑定超链接点击事件，然后隐藏或显示你在那里要的元素。因此$('input:radio').toggle();将根据当前状态隐藏或显示所有单选按钮（即，如果它们隐藏，则显示，反之亦然）。

$(document).ready(function() { 
     $('#hideshlowlink').click(function() { 
      $('input:radio').toggle(); 
      $('#idofelementsToHideShow').toggle(); 
     }); 
}); 

如果您将所有这些元素都放在div或某个容器中，那么只需在click事件内切换容器即可。否则，您可以自行切换每个元素。

Answer 3

你需要的东西是这样的：

$("#linkid").click(function() { 
    $("#togglediv").toggle() 
}) 

而且你可能想要把href='#'到<a >标签了。

或者，你可以做这样的事情：

$("#linkid").toggle(function(event) { 
     event.preventDefault() 
     $("#togglediv").show() 
}, function(event) { 
     event.preventDefault(); 
     $("#togglediv").hide() 
}) 

这样做的好处是可以调用其他JS处理上显示或隐藏，可能是特定的节目或特定于一躲，等改变链接的文字。