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

Question

при просмотре на мобильном устройстве мое отзывчивое 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>

Answer 1

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

Селекторы CSS
> селектор для ближайших детей
~ селектор для всех братьев и сестер предыдущего элемента

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

---

Демо

// 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>