Показать и скрыть различные элементы на фокусе

Question

Я изучал некоторые способы показать и скрыть элементы HTML, и я нашел this.

Мое намерение состоит в том, чтобы использовать способ показать и скрыть элементы без использования JavaScript, JQuery или всего остального, кроме CSS и HTML, поэтому я решил использовать атрибут tabindex, а затем я создал следующий простой случай изучения ...

HTML:

<div id="root" tabindex="1"> 
    <div>DIV A</div> 
    <a class="hidden" href="http://www.google.com">LINK</a> 
    <div class="hidden">DIV B</div> 
    <input class="hidden" type="submit" value="input"/> 
</div> 

CSS:

.hidden 
{ 
    color: red; 
    display: none; 
} 

#root:FOCUS .hidden 
{ 
    display: block; 
} 

Если вы посмотрите в соответствии с кодом, внутренний DIV может быть легко нажмите и выберите. Однако ссылку и кнопку, к сожалению, невозможно щелкнуть или выбрать. В попытке сделать так, фокус корневого div теряется.

Мой вопрос очень прост. Есть ли один или несколько способов, которыми это можно обойти/решить без использования JavaScript или JQuery или что-то еще? (Только для CSS и HTML)

Если было не ясно, мои намерения состоят в том, чтобы скрыть элементы, чтобы при их открытии их можно было использовать. Я хотел бы создать меню, содержащее подменю, и подменю появляются только при нажатии на их родительское меню (а не при прохождении мыши над ними).

Ах! И я должен упомянуть ... Я также нашел решение, которое использует флажок. К сожалению, это невозможно, потому что мне не придется снова нажимать на элемент, чтобы он был скрыт. То есть, я хотел бы просто щелкнуть за пределами элемента, чтобы он скрывал свой внутренний элемент, поэтому я выбрал «tabindex».

Заранее за внимание и терпение.

Answer 1

Вы также должны добавить FOCUS в скрытый класс, чтобы при их выборе фокус не терялся.

#root:FOCUS .hidden, 
.hidden:FOCUS 
{ 
    display: block; 
} 

Answer 2

Проблема в вашем коде заключается в том, что всякий раз, когда вы нажимаете дочерний элемент скрытого класса, родительский элемент теряет фокус. Таким образом, стиль css применяется к умолчанию, который должен скрывать дочерние элементы со скрытым классом.

Я думаю, что это можно решить, используя javascript.

function focusRoot(e) { 
    e.currentTarget.parentElement.focus(); 
    return; 
} 
var root = document.getElementById('root'); 
var cs = root.children; 
for (var i = 0; i < cs.length; i++) { 
    var c = cs[i]; 
    c.onfocus = focusRoot; 
} 

Working fiddle