演示

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>

CSS <ul> <li>子菜单在单击时不会关闭，需要使用关闭链接进行交换

1 个答案:

演示