0

リンクをクリックしたときにリストを表示できるメニューを作成しようとしています。サブメニューを含むメニュー タイトルを作成するか、サブリストを含むリストを作成するかがわかりません。

たとえば、クリックすると

「例1」

例1-1、例1-2、例1-3などのサブリストが表示されます。

どんな提案でも大歓迎です!!!

4

4 に答える 4

0

私の知る限り、CSSクリックはサポートされていません。（別としてa:active、しかしそれはあなたを助けません）。this、this、およびthisチュートリアルhoverに従って、機能を備えたドロップダウン メニューを作成することができます。

必要なものを作成するには、javascript を使用する必要があります。

于 2012-06-17T18:59:59.743 に答える
0

また、非常に柔軟で簡単に実現できる JavaScript ベースのソリューションをお勧めします。ただし、絶対に HTML/CSS のみを使用したい場合は、次のようにすることができます。

「クリック」で動作します。Safari 5/6、Firefox 13 (両方の OS X)、および IE9 (Windows 7) でテストされています。コンテナをクリックすると、リストが表示されます。開いている (フォーカスされた) コンテナー (2 番目のリストなど) またはページ上の他の要素の外側をクリックするまで、表示されたままになります。

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

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

これは単純な例です。lastElementChildは IE<9 では機能しないため、jquery または id を使用して内側の要素を選択する必要があります。

jqueryを使用できない場合は、使用できます

(lastElementChild?lastElementchild:lastChild)

これはIE<9でも最後の子を返します

于 2012-06-17T18:38:04.967 に答える