CSS<；ul>&书信电报；李>；子菜单赢得'；t单击后关闭，需要与关闭链接交换

在移动视图中，当您单击链接时，my css responsive menu for mobile将显示子菜单，但如何更改链接，例如“Close X”，因为列表很长，如果您返回链接，它不会关闭，除非您单击其他链接

我已经设法创建了一个单独的紧密链接。但这意味着我有两个链接。我想要一个链接将打开，然后更改为关闭链接时，子菜单是打开的，当你点击它将关闭

谢谢

css

菜单

关闭X直到单击“城市”后才显示

伦敦
纽约
罗马

正如您所希望的那样，我相信，大部分功能都是通过CSS将jquery保持在最低限度

CSS选择器
>直接子女选择器
~前面元素的所有同级的选择器

如果这不是你所希望的，请告诉我

---

演示

//添加单击事件以折叠锚点
$（“li>a.collapse”）。单击（函数（）{
//移除。从父级展开类
$（this.parent（）.removeClass（“展开”）；
});
//添加单击事件以展开定位
$（“li>a.expand”）。单击（函数（）{
//将类扩展到父类
$（this.parent（）.addClass（“展开”）；
});
li>a.collapse，li.expand>a.expand{
显示：无；
}
展开>折叠{
显示：继承；
}
li>a.expand~ul{
显示：无；
}
li.expand>a.expand~ul{
显示：继承；
}



接近
城市

伦敦
纽约
罗马


您无法使用CSS实现这一点。你需要JavaScript。谢谢，效果很好。我试图避开jquery；），但是，由于我已经为项目加载了它，所以最好使用它。虽然有人说没有js你做不到，但你可以说，我最初使用的psuedo click是有效的，但是当它在桌面视图中时，鼠标悬停就不起作用了#城市：选中~.showcity{display:block；position:relative；float:none；transform:scale（1,1）；}
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>