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

你需要这样的东西：

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

您可能也想将href='#'放入<a >标记。

或者，您可以这样做：

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

这样做的好处是，您可以在节目上调用其他JS处理，或者隐藏可能特定于节目或特定于隐藏的节目，例如更改链接的文本。

Answer 3

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

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

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

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

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

3 个答案: