Question

当我使用jQuery单击--gdb时，我正在尝试修改UL。我敢肯定这一定很简单，但是我一生都无法摆脱困境！

这是一个简单的过滤器菜单，该菜单使用LI属性，因此当您将鼠标悬停在其上时，max-height会发生变化，并显示菜单。我遇到的问题是，当菜单max-height在移动设备上出现问题时，我需要在单击LI时重置菜单。

输出由Wordpress插件提供动力，因此我无法更改或更改无济于事的结构。

HTML结构类似于以下内容：

<div class="alm-filter">
  <ul>
    <li class="alm-filter--radio"><a href="">First menu item</a></li>
    <li class="alm-filter--radio"><a href="">Second menu item</a></li>
    <li class="alm-filter--radio"><a href="">Third menu item</a></li>
  </ul>
</div>

任何我的CSS如下：

.alm-filter ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 271px;
  display: inline-block;
  vertical-align: text-top;
  max-height: 60px;
  overflow: hidden;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  position: absolute;
  z-index: 3;
}

.alm-filter ul.small {
max-height: 60px;
}

.alm-filter ul:hover {
  max-height: 317px;
}

.alm-filter li {
  text-align: left;
}

.alm-filter li a {
  color: #104530;
  display: block;
  font-size: 16px;
  padding: 15px 32px;
  background-color: #B7C6C1;
}

.alm-filter li a:hover {
  background-color: #f0f0f0;
}

我尝试了在这里找到的各种Jquery代码段，最后一个看起来最简单的实现是：

$('.alm-filter--radio').click(function(){ 
$('.alm-filter ul').toggleClass('small');  
});

悬停效果很好，但是在较小的设备上，当用户单击菜单链接时，菜单保持打开状态，这有点令人困惑。理想情况下，我想要的是单击链接时关闭菜单。

任何帮助/建议将不胜感激！

李的Jquery目标UL onclick

0 个答案: