0

我的问题是如何在不使用 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>
4

3 回答 3

0

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

除非您每次只放置链接并将用户重定向到具有扩展内容的页面。

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

于 2013-01-14T23:52:05.180 回答
0

您可以使用 :target css 伪选择器来做到这一点 - 虽然它不是很优雅，因为单击锚标记会修改 url，因此很难切换表单。最好使用 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>

:target 的一些示例：http: //css-tricks.com/css-target-for-off-screen-designs/和http://css-tricks.com/on-target/

于 2013-01-15T00:05:25.873 回答
0

CSS 3 有一个:target伪选择器可能会有所帮助。这是一个例子：https ://tinker.io/1756b

于 2013-01-15T00:05:40.507 回答