CSS <ul><li> 子菜单不会在点击时关闭，需要与关闭交换 link

Question

在移动设备视图中，我的 css 响应式移动菜单会在您单击 link 时显示子菜单，但是如何将 link 更改为 'Close X' 因为列表很长，如果您返回 link，它不会关闭，除非您单击另一个 link。

我已经成功地创建了一个单独的关闭 link。但这现在意味着我有两个 link。我想要 1 link 它将打开，然后在子菜单打开时更改为关闭 link，当您单击它时它将关闭。

谢谢

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

CSS <ul><li> 子菜单不会在点击时关闭，需要与关闭交换 link

CSS <ul><li> submenu won't close on click, need to swap with close link

css

menu

演示