如何在不使用JS的情况下制作可扩展面板？(How can I make expandable panels without using JS?)

如何在不使用JS的情况下制作可扩展面板？(How can I make expandable panels without using JS?)

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

My question is how can I create expandable panels in an HTML form without using javascript, so that when a user clicks on each panel it expands and displays the form.

Before click:

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

After click:

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

最满意答案

你可以使用：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/

You can do that using :target css pseudo selector - it is not very elegant though, as clicking on the anchor tag modifies the url so it is hard to toggle the form. Best use 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>

some examples of :target in action: http://css-tricks.com/css-target-for-off-screen-designs/ and http://css-tricks.com/on-target/