web-dev-qa-db-ja.com

サブメニューのみを持つメニュー項目にドロップダウン矢印インジケーターを追加しますか？

現在、サブメニューオプションがあるアイテムのナビゲーションメニューに矢印インジケーターを追加しようとしています。

現在私はこのCSSを使用しています：

.mainNav li > a:after {
   color: #444;
   content: ' ▾';
}

ただし、これにより、サブメニューがあるかどうかに関係なく、すべての<li>にドロップダウン矢印が追加されます。 CSSだけで、この矢印をサブアイテムを持つアイテムにのみ追加する方法はありますか？

ありがとう！

cssnavigationhtml-listssubmenu
5
user3101431

いいえ。CSSにはcontains childセレクターがありません。 li要素にクラスを追加する方がよいでしょう。例えば：

<li class="has-child">
    <a href="#">The Link</a>
    <ul class="child">
        <li>Child 1</li>
    </ul>
</li>

CSSセレクターは次のようになります。

.mainNav li.has-child > a:after {
   color: #444;
   content: ' ▾';
}

オプションの場合は、jQueryにクラスを追加させることができます。

$('.mainNav li:has(ul)').addClass('has-child');

jsFiddle Demo

11
BenM

CSSには_contains child_セレクターがありません。ただし、さまざまなsiblingセレクター、_only-child_およびnot(:only-child)があります。アンカーにインジケーターを追加するため、次のCSSを使用します。

_ .mainNav li>a:not(:only-child):after {
       color: #444;
       content: ' ▾';
    }_
_<div class="mainNav">
    <li>
        <a href="#">The item with child</a>
        <ul class="child">
            <li>Child 1</li>
        </ul>
    </li>
    <li>
        <a href="#">No child item</a>
    </li>
</div>_

そのようなスタイルは swimbi css men で使用されます

2
dmpost

はい、jQueryなしで実行できます： https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/

0
Steef