Подменю CSS <ul><li> не закрывается при нажатии, необходимо поменять местами с закрытой ссылкой

когда в мобильном представлении мое адаптивное меню css для мобильных устройств будет отображать подменю, когда вы нажимаете на ссылку, но как изменить ссылку на что-то вроде «Закрыть X», поскольку список длинный, и если вы вернетесь по ссылке, не закрывается, пока вы не нажмете другую ссылку.

Мне удалось создать отдельную закрытую ссылку. Но теперь это означает, что у меня есть две ссылки. Мне нужна 1 ссылка, которая будет открываться, а затем переходить на ссылку закрытия, когда подменю открыто, и когда вы нажимаете на нее, она закрывается.

Спасибо

css

nav li ul {
display:none;
}

# open         
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;

}

# close
nav ul li #close:hover + .hidden, .hidden:hover {
display: none;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}

меню

<ul>
<li><span id = "close">Close X don't show till city clicked</span>
<a href=# class = "city">Cities ￬ remove and replace with close or up arrow</a>
<ul class=hidden>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>

Вы не можете сделать это с помощью CSS. Вам нужен JavaScript.

— 17.06.2019 20:25

css menu

17.06.2019 19:59

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

113

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это работает, как вы надеетесь, я полагаю, что большая часть функций осуществляется через CSS, чтобы свести jquery к минимуму.

CSS Selectors
> selector for immediate children
~ selector for all siblings of the preceding element

Дайте мне знать, если это не то, на что вы надеялись.

Демо

// Add click event to collapse anchor
$("li > a.collapse").click( function()  {

  // Remove .expand class from parent
  $(this).parent().removeClass("expand");
  
});

// Add click event to expand anchor
$("li > a.expand").click( function() {

  // Add .expand class to parent
  $(this).parent().addClass("expand");
  
});

li > a.collapse, li.expand > a.expand {
  display: none;
}
li.expand > a.collapse {
  display: inherit;
}
li > a.expand ~ ul {
  display: none;
}

li.expand > a.expand ~ ul {
  display: inherit;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>
    <a class = "collapse">Close</a>
    <a class = "expand">Cities</a>
    <ul>
      <li>London</li>
      <li>New York</li>
      <li>Rome</li>
    </ul>
  </li>
</ul>

Спасибо хорошо работает. Я пытался избежать jquery;), но, поскольку он уже загружен для проекта, я мог бы его использовать. Хотя люди говорят, что вы не можете сделать это без js, вы можете вроде как, у меня изначально что-то работало с псевдокликом, который работал, но когда он находится в режиме рабочего стола, наведение не работает. #city:checked ~ .showcity { display: block; должность: родственница; поплавок: нет; преобразование: масштаб (1,1); }

— 18.06.2019 09:53

17.06.2019 20:25