javascript - 使用 JavaScript 隐藏/显示高级选项

Question

我正在制作一个 HTML 表单，我希望某些字段位于“高级选项”下。我想制作一个“高级选项”链接，可能带有“加号”符号，以便当用户单击链接或符号时，这些高级字段会显示出来。我如何在 JavaScript 中执行此操作？我尝试在 Google 上搜索类似“隐藏/显示高级选项”的内容，但找不到解决方案。

<form ... />
    <label>
      Title 
      <input id="title" name="title" size="40" type="text" value="" /> 
    </label>
    <label>
      Year 
      <input id="year" name="year" size="20" type="text" value="" /> 
    </label>
    <label>
      Year 
      <input id="comment" name="comment" size="40" type="text" value="" /> 
    </label>
</form>

比如这里我想把“评论”字段提前

Answer 1

<a href='#' class='advanced'>Advanced Options</a>

<div id='advancedOptions'><!-- Form stuff here --></div>

<script type='text/javascript'>
    $(document).ready(function () {
        $('#advancedOptions').hide();
        $('.advanced').click(function() {
            if ($('#advancedOptions').is(':hidden')) {
                 $('#advancedOptions').slideDown();
            } else {
                 $('#advancedOptions').slideUp();
            }
        });
    });
</script>

它将在加载时隐藏 advancedOptions 元素，当您单击 a 标签时，它将检查 advancedOptions 是否被隐藏，如果是那么它会显示它，如果它没有隐藏它会隐藏它。您将需要；

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 

在你使用的页面顶部，我知道是JQuery，但是学习JQuery对以后的引用会有帮助