0

我正在寻找一个菜单，当我点击一个链接时，它可以让我显示一个列表——我不确定我应该创建一个带有子菜单的菜单标题，还是一个带有子列表的列表。

例如，如果我点击

“示例 1”

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

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

4

4 回答 4

0

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

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

于 2012-06-17T18:37:49.710 回答
0 
<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<9

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

(lastElementChild?lastElementchild:lastChild)

这也将返回 IE<9 上的最后一个孩子

于 2012-06-17T18:38:04.967 回答
0

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

它可以“点击”。它在 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>

演示

先试后买

于 2012-06-18T21:54:20.933 回答
0

据我所知CSS不支持点击。（除了a:active，但它不会帮助你）。hover根据this、this和this教程，可以创建具有功能的下拉菜单。

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

于 2012-06-17T18:59:59.743 回答