移动元素并在HTML中动态创建新元素

Question

我有一个虚构的网站，如下面的截图。我想要一个动态元素，例如，当点击过滤器和搜索属性链接时，它下方的代理首选项链接向下移动页面，新项目似乎给出了用户可以选择更多选项（可能只是几个额外的按钮，或者可能是一个复选框等），而不会重新加载整个页面。

这是否可以仅使用HTML或是否总是有一个javascript元素？关于在各种网站上看到的半透明'pop-overs'，也会有同样的说法吗？我不是特别推迟Javascript，但想知道这是如何实现的。

Answer 1

是的，通常只要您想要动态内容，就必须使用Javascript。随着许多令人敬畏的Web技术（HTML5，CSS3等）的最新进展，过去只能用其他语言做的很多事情都可以完成，但是你会牺牲兼容性（只有较新的浏览器会支持）这些新功能）。

Answer 2

是的，您可以使用Javascript，HTML和CSS获得动态内容，我已使用下面的function showHidden()来完成此操作。

I've made a small demonstration with very minimal code to show you what you want in as few lines as possible

如果不直观，请点击“点击我”，您会看到一个元素弹出。

您会注意到元素已经存在，并且在按下按钮之前一直隐藏。这是一种做法。另一个是附加到列表like so

JQUery会很高兴，你可以用它来更有效地操作DOM。

Answer 3

如果您希望在单击链接时显示额外的元素，可以在之前创建此元素并使用CSS display: none;隐藏它们。单击该链接时，将调用JavaScript函数（onclick="myFunction();"）。该函数应该使用document.getElementsByClassName("yourClass")获取隐藏元素类，并使用for循环遍历它们并将它们设置为display: inline。 使用jQuery，这更容易。您可以onclick="$('.yourClass').show();。

为了使事物透明化，设置CSS属性opacity: X;，其中X的值介于0和1之间（0 =完全不可见，1 =完全不透明）。

以下是HTML，CSS和JS的完整示例：

<style>
.hidden {display: none;}
</style>

<button class="hidden">This is hidden for now</button>
<button onclick="$('.hidden').show();">This button will make the first button appear</button>

p.s。：你必须包含jQuery库才能使上面的例子工作。

Answer 4

我知道实现此目的的最简单方法是使用简单的JS，在点击时更改CSS显示属性。我不知道如何在HTML上实现这一目标，而是向您展示我的意思：

  <ul>
     <li onClick="viewOptions('furtherOptions')">Filter and Search Properties</li>
       <div id="furtherOptions" style="display: none">
         <ul>
            <li>Option</li>
         <ul>
        </div>
       </li>
     </ul>

在HTML中，我会将已经编码的额外答案视为存在，但CSS属性为“display：none”。然后你可以做类似的事情：

function viewOptions(varWhichOptions) {
   document.getElementByID(varWhichOptions).style.display = "block";
 }

哪个会找到你传给它的id的元素，并将它的CSS更改为阻止，以使其可见。

当然，您必须更详细地了解诸如关闭已经扩展的内容时打开新内容等等。要再次隐藏它，您也可以这样做，但添加“none”而不是“block”。

抱歉，我知道你说你想要一个HTML答案，但正如我所说，我不知道一个。