Question

我正在通过HTML和CSS处理菜单下拉列表。检查子菜单的宽度时遇到问题。我有一个菜单like this

当我们指向该元素时，它会显示下拉菜单like this或like this

子菜单是动态菜单。它具有相同的样式，相同的css名称，但依赖于数据，因此子菜单可以是小型或大型。所以我想检查子菜单宽度，如果任何子菜单的宽度大于200px - >在子菜单中添加一个css类（其他＆lt; 200px，不得添加）

我的想法是使用JS来检查子菜单元素的宽度。但我是新手。我试过

<script>
  if ($('.sub-dropdown').width() > 200) {
       $('.sub-dropdown').addClass('float-right');
  }
</script>

但当然，它添加到所有子菜单，即使它们小于200px :(

任何人都可以有这个问题的经验吗？请给我一个解决方案。

非常感谢。

Answer 1

我会告诉您为什么您的所有子下拉菜单都会有float-rigth课程。只有当你的一个子下拉框的宽度大于200时，你的if判断才会成立，所以代码会进入$('.sub-dropdown').addClass('float-right');。这段代码会将你的所有方框添加到类中float-right哪个方框的类是子下拉列表。

您应该像这样更改代码

$('.sub-dropdown').each(function(index,ele){
    if($(ele).width()>200){
        $(ele).addClass('float-right');
    }
});

通过JS检查width元素

1 个答案: