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

Hide/show advanced option using JavaScript

本文关键字：显示 高级选项 隐藏 JavaScript 使用      更新时间：2023-09-26

我正在制作一个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>

例如，这里我想把"comment"字段提前

<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对于将来的参考会很有用

你正在寻找这样的东西(纯JS):

function more(obj) {
    var content = document.getElementById("showMore");
    if (content.style.display == "none") {
        content.style.display = "";
        obj.innerHTML = "-";
    } else {
        content.style.display = "none";
        obj.innerHTML = "+";
    }
}

这个函数检查你的内容的可见性，如果它是隐藏的，显示它，反之亦然。它还把正号变成了负号。下面是修改后的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>

和一个演示:http://jsfiddle.net/uSqcg/

创建一个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规则隐藏)

.hidden {
   display: none;
}

…以防万一

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

这将定位浮动对话框(类似于alt)相关的父对象的div(包含你的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>
相关文章：