Question

我想创建一个菜单，当我点击一个链接时，我可以显示一个列表 - 我不确定是否应该创建一个带子菜单的菜单标题，或者一个带有子列表的列表。

例如，如果我点击

“示例1”

显示示例1-1，示例1-2，示例1-3等的子列表。

任何建议都非常感谢!!!

Answer 1

我建议你可以使用jquery和一些样式，有一个例子：

http://jsfiddle.net/rv87r/1/

Answer 2

<ul>
    <li style="cursor:pointer" onclick="lastElementChild.style.display=(lastElementChild.style.display=='none'?'':'none')">list1
        <ul>
        <li>item1</li>
        <li>item2</li>
        </ul>
    </li>
</ul>

这是一个简单的例子，您应该使用jquery或id来选择内部元素，因为 lastElementChild 不适用于IE＆lt; 9

如果你不能使用jquery那么你可以使用

(lastElementChild?lastElementchild:lastChild)

这将返回IE上的最后一个孩子＆lt; 9 too

Answer 3

据我所知CSS不支持点击。（除了a:active，但它对你没有帮助）。根据{{3}}，this和this教程，可以创建一个包含hover功能的下拉菜单。

要创建您需要的内容，您必须使用javascript。

Answer 4

我还建议使用基于JavaScript的解决方案，因为它非常灵活且易于实现。但是，如果您绝对只想使用HTML / CSS，可以这样做：

它可以点击＆＃34;点击＆＃34;。它在Safari 5/6，Firefox 13（OS X）和IE9（Windows 7）中进行了测试。单击容器时，列表将变为可见。直到您在打开（聚焦）容器（例如第二个列表）或页面上的任何其他元素外单击它才会保持可见。

<强> CSS

div.container > h2 {
    cursor: pointer;
}

div.container > ul {
    display: none;
}

div.container:focus > ul {
    display: block;
}

<强> HTML

<div class="container" tabindex="-1">
    <h2>Example 1</h2>
        <ul>
            <li>List Element 1</li>
            <li>List Element 2</li>
            <li>List Element 3</li>
    </ul>
</div>

<强>演示

Try before buy

如何在单击时创建显示自己的列表？

4 个答案: