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

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

javascript html

使用JavaScript隐藏/显示高级选项,javascript,html,Javascript,Html,我正在制作一个HTML表单，我希望一些字段位于“高级选项”下。我想制作一个“高级选项”链接，可能带有一个加号，这样当用户点击链接或标志时，那些高级字段就会显示出来。如何在JavaScript中实现这一点？我试着在谷歌上搜索“隐藏/显示高级选项”，但找不到解决方案 <form ... /> <label> Title <input id="title" name="title" size="40" type="text" value=

我正在制作一个HTML表单，我希望一些字段位于“高级选项”下。我想制作一个“高级选项”链接，可能带有一个加号，这样当用户点击链接或标志时，那些高级字段就会显示出来。如何在JavaScript中实现这一点？我试着在谷歌上搜索“隐藏/显示高级选项”，但找不到解决方案

<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>


标题
年
年

例如，这里我希望“注释”字段是高级的。


<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>

$（文档）.ready（函数（）{
$（'#advancedOptions'）.hide（）；
$（'.advanced'）。单击（函数（）{
如果（$（“#advancedOptions”）.is（“：hidden”））{
$（“#高级选项”）.slideDown（）；
}否则{
$（“#高级选项”）.slideUp（）；
}
});
});

它将在加载时隐藏advancedOptions元素，当您单击a标记时，它将检查advancedOptions是否隐藏，如果隐藏，则将显示它，如果未隐藏，则将隐藏它。你需要

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

在您使用的页面顶部，我知道它是JQuery，但了解JQuery以供将来参考将非常有用

您正在寻找类似的东西（纯JS）：

此函数检查内容的可见性，如果内容隐藏，则显示内容，反之亦然。它还将加号更改为减号。以下是修改后的HTML：

<a href="#" onclick="more(this);">+</a>
<br>
<label id="showMore" style="display: none;">
  Year 
  <input id="comment" name="comment" size="40" type="text" value="" /> 
</label>

年

和一个演示：

创建一个div元素，创建一个css规则使其在默认情况下隐藏，在div元素上添加onmouseover和onmouseout事件，并具有与之相关联的以下函数：

function showSomething(textToShow, container) {
    var yourElement = $('#yourDivElement');
    yourElement.removeClass('hidden');

    var w = container.getClientRects()[0].width;
    var h = container.getClientRects()[0].height;
    var t = container.getClientRects()[0].top;
    var l = container.getClientRects()[0].left;

    var st = document.documentElement.scrollTop;
    var sl = document.documentElement.scrollLeft;

    if (st == 0 && document.body.scrollTop > st)
        st = document.body.scrollTop;

    if (sl == 0 && document.body.scrollLeft > sl)
        sl = document.body.scrollLeft;

    yourElement.css('top', t + st + h / 3 * 2);
    yourElement.css('left', l + sl + w / 3 * 2);

    yourElement.html(textToShow);

    var lines = textToShow.length / 20;
    yourElement.css('height', 20 + lines * 10);
}

function hideSomething() {
    $('#yourDivElement').addClass('hidden');
}

以防万一（要隐藏的css规则）

而且。。。以防万一

<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>

这将定位与div的父对象（包含div元素的对象）相关的浮动对话框（类似于alt）

简单；）

试试这段代码，下面是


$（文档）.ready（函数（）{
$（'.advanced'）。单击（函数（）
{
$（“#隐藏”）.toggleClass（“隐藏”）；
});
});
.隐藏
{
显示：无；
}
标题


年


+


年

你试过什么了吗？@ExplosionPills是的，我试过寻找解决方案。我不确定JavaScript函数会做什么。您能给我一个提示吗？使用CSS类名（或样式属性）隐藏您的高级选项。单击“显示高级选项”链接时，使用JavaScript函数删除类（或样式属性）。这对我来说很有效，但每次页面都会重新加载，我的表单将丢失输入。要解决此问题：我必须替换

$（'.advanced'）。单击（function（）{

为

$（'.advanced'）。单击（function（e）{

，然后下一行添加

e.preventDefault（）；

.hidden {
   display: none;
}

<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $('.advanced').click(function()
      {
        $('#hide').toggleClass("hidden");
      });
  });
</script>
<style>
.hidden
{
    display:none;
}
</style>
</head>
<body>
        <form >
        <label>
          Title 
          <input id="title" name="title" size="40" type="text" value="" /> 
        </label><br/>
        <label>
          Year 
          <input id="year" name="year" size="20" type="text" value="" /> 
        </label><br/>
        <label class="advanced">
          +
        </label><br/>
        <label id="hide" class="hidden">
          Year 
          <input id="comment" name="comment" size="40" type="text" value="" /> 
        </label>
    </form>
</body>
</html>