Чисто раскрывающееся меню css с кнопкой закрытия

Question

Итак, у меня есть простой выпадающий список, который активируется при наведении или фокусировке (при наведении курсора на рабочий стол и фокусе для мобильного телефона, что прекрасно работает.

Моя проблема в том, что я пытаюсь добавить кнопку закрытия в раскрывающийся список, но Кажется, я не могу понять, как этого добиться. То, что я хочу сделать, это сфокусироваться на span (закрыть ... я могу заменить на кнопку, если это поможет), возможно, потерять фокус родительского div, чтобы он закрылся. Кнопка закрытия отображается только на мобильном устройстве, поскольку раскрывающийся список имеет высоту 100% и высоту 100%, поэтому невозможно щелкнуть, чтобы потерять фокус, в отличие от веб-сайта рабочего стола

Вот что я имею до сих пор:

.group:hover .group-hocus\:block,
.group:focus .group-hocus\:block {
  display: block;
}

.hidden {
  display: none;
}

<div class="group">
  <button>open</button>
  <div class="group-hocus:block hidden">
    <span style="padding: 5px;">x Close</span><br />
    Content Here...
  </div>
</div>

Возможно ли это только с CSS, если да, то как бы я go сделал это?

Answer 1

Вы можете использовать focus-within и сделать свой близкий элемент фокусируемым, добавив к нему tabindex:

.group:hover .group-hocus\:block,
.group:focus .group-hocus\:block {
  display: block;
}

.hidden {
  display: none;
}

.group-hocus\:block {
  width:200px;
  height:200px;
  border:3px solid red;
}
.group-hocus\:block span {
  font-size:25px;
  color:green;
  cursor:pointer;
  outline:none;
}
.group-hocus\:block:focus-within  {
 display:none!important;
}

<div class="group">
  <button>open</button>
  <div class="group-hocus:block hidden">
    <span style="padding: 5px;" tabindex="-1">x Close</span><br />
    Content Here...
  </div>
</div>

Answer 2

Попробуйте прибегнуть к взлому флажка CSS, спасибо позже;)

В двух словах, он использует флажок ввода и метку. Скрыть флажок, стиль метки, чтобы быть «X».

Тогда в CSS вы можете использовать ввод: проверено .menu-open {бла-бла-бла}.

Вы можете довольно легко это скрыть или изменить с помощью mediaQueries