Question

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

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

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

HTML结构类似于以下内容：

.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;
}

任何我的CSS如下：

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

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

this.bsModalRef = this.modalService.show(NewEmailComponent, { class: 'modal-sm'});

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

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

谢谢

詹姆斯

Answer 1

您可以从CSS中删除 .alm-filter ul：hover 并将javascript更改为

function resetHeight() {
    $('.alm-filter ul').css('max-height', '');  
}

$('.alm-filter--radio').hover(function() {
    $('.alm-filter ul').css('max-height', '317px'); 
}, resetHeight).click(resetHeight);

jQuery在单击另一个元素时更改一个元素的类

1 个答案: