CODEWITHSUNDEEP
csscss-selectors
Xarcell
Xarcell

Reputation: 2011

Grandchild :focus Not keeping Parent Open Even With ~ Selector

I have a little experiment going on. I'm trying to create an onclick menu without javascript using :focus. The issue I'm having is with grandchild, which clicked it still closes the parent. I tried using the ~ selector to keep it open, but it isn't working and I don't understand as to why.

<nav id="main-menu">
    <ul>
        <li><a href="">Menu 1</a></li>
        <li tabindex="0" class="onclick-item"><span>Menu 2</span>
            <ul class="onclick-show-content">
                <li><a href="#">Sub-Menu 1</a></li>
                <li tabindex="0" class="onclick-item"><span>Sub-Menu 2</span>
                    <ul class="onclick-show-content">
                                <li><a href="#">Sub-Sub-Menu 1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</nav>

.onclick-item { outline: none; }
.onclick-item:focus {
        pointer-events: none;
            }
.onclick-item > .onclick-show-content {
        overflow: hidden;
        max-height: 0;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}
.onclick-item:focus > .onclick-show-content, .onclick-item:focus ~ .onclick-show-content {
        max-height: 540px;
        pointer-events: auto; 
}

codepen: http://codepen.io/anon/pen/iuhtn

Upvotes: 0

Views: 102

Answers (1)

BoltClock
BoltClock

Reputation: 723538

When you click on the grandchild, focus is taken off of its grandparent. That causes the :focus > rule to no longer apply to the grandparent.

The ~ selector doesn't work the way you're using it as there are no .onclick-show-content elements that are following siblings of .onclick-item elements. The structure that you have doesn't seem to be conducive for using ~ either, as it's parent-child-based, not sibling-based.

Upvotes: 1

Related Questions