Question

我的问题是如何在不使用javascript的情况下在HTML表单中创建可扩展面板，这样当用户点击每个面板时，它会展开并显示表单。

点击之前：

<ul>
    <li id="panel1"><a></a><div class="content"></div></li>
    <li id="panel2"><a></a><div class="content"></div></li>
    <li id="panel3"><a></a><div class="content"></div></li>
</ul>

点击后：

<ul>
    <li id="panel1">
      <a></a>
        <div class="content">
            <form id="FORM"> ..... </form>
        </div>
    </li>
    <li id="panel2"><a></a><div class="content"></div></li>
    <li id="panel3"><a></a><div class="content"></div></li>
</ul>

Answer 1

根本不使用任何javascript，你不能。

除非您只是放置链接并将用户重定向到每次都包含展开内容的网页。

或者除非你使用：hover伪选择器编写某种复杂的CSS而不是click事件。

Answer 2

你可以使用：target css伪选择器 - 它不是很优雅，因为点击锚标签会修改网址，因此很难切换表单。最好使用javascript。

        <style>
        form {
            display: none;
        }
        form:target {
                display: block;
                background: red;
            }
        </style>
        <ul>
<li id="panel1" ><div class="content"><a href="#form">Show form</a><form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>

一些例子：目标在行动： http://css-tricks.com/css-target-for-off-screen-designs/和http://css-tricks.com/on-target/

Answer 3

CSS 3有一个可能有帮助的:target伪选择器。以下是一个示例：https://tinker.io/1756b

如何在不使用JS的情况下制作可扩展面板？

3 个答案: