通过JS检查宽度元素

Question

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

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

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

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

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

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

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

非常感谢。

Answer 1

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

您应该像这样更改您的代码

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

通过JS检查宽度元素

Check width element by JS

html

javascript

css

submenu

drop-down-menu