4

css3 と target 属性を使用してインタラクティブなメニューを作成しています。メニューボタンをクリックすると、:target 属性を使用してサブメニューを開くようにしています。メニューポイントがターゲットの場合、サブメニューの高さを自動に設定し、ターゲットでない場合は高さを0にする必要があると簡単に言います.

しかし、私の質問は次のとおりです。ターゲットを簡単に削除する方法はありますか? 私がやりたいことは、メニューボタンをクリックするとサブメニューが表示されることです(私はすでにそれを作っています)。次に、同じボタンをもう一度クリックすると、もう一度閉じたいと思います。

純粋な css/html でこれを行う方法はありますか、またはこれを行うには javascript/jquery に変更する必要がありますか? これまではcss3を使ってこれを回避してきました。

4

1 に答える 1

6

へのリンクの前に表示される別のアンカーへの絶対配置リンクを作成し:target、現在の:target作業の場合にのみ表示することができます。したがって、視覚的にはトグル リンクとして動作します ( fiddle を参照)。

HTML

<div id="test">
    <h2>
        <a href="#test">Open me</a>
        <a href="#" class="untarget"></a>
    </h2>
    <div>
        <p>Some contents</p>
        <p>Some more contents</p>
        <p>Some more contents again</p>
    </div>
</div>

CSSの重要な部分

h2 {
    position: relative;
    display: inline-block;
}

.untarget {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

:target .untarget {
    display: block;
}

JS を使用せずにトグル機能を実装するもう 1 つの (そして非常に一般的な) 方法は、非表示のチェックボックス/ラジオ ボタンとそれらの:checked疑似クラスを CSS 兄弟コンビネーターと共に使用することです。しかし個人的には、それが正しい HTML の使い方かどうか疑問に思っています。

于 2013-07-11T16:23:30.113 に答える