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根据thisthisthis教程,可以创建具有功能的下拉菜单。

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

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