javascript - 通过JS检查宽度元素

Question

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

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

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