通过JS检查宽度元素

Question

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

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

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

我的想法是使用 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');
    }
});