javascript - 根据菜单项的数量更改菜单项的宽度

Question

使用 Joomla 我有 4 个菜单项。其中之一是可选的。如果我想取消发布这个菜单项，其他菜单项的宽度应该增加，但只能在视口(viewport)最小宽度 980px 处增加。 菜单的 ID 为#menu，我要更改的元素宽度为#menu li。可选的菜单项将 .optMenuitem 作为其类名。对于四个菜单项，宽度应为 25%，对于三个则为 33.33%。 我想到了这样的事情:

function changeWidth (){
	var four = document.getElementsByClassName('optMenuitem');
	var opt = document.getElementByID('menu');
	if (four==true){
		opt.li.style.width = "25%";
	} else {
		opt.li.style.width = "33.33%";
	}
}

不起作用。我是新手。有什么建议吗？

Answer 1

编辑 我添加了简单的 JS 来向您展示如何向元素添加类

如果您不反对使用 flexboxes ，这里是解决方案。

flexboxes 的唯一缺点是 they work on recent browsers and not old ones 。

无论如何，这就是答案(我会给你 CSS + HTML，我会让你处理 JS 方面，你只需要将类应用到你的菜单项并根据需要添加/删除它们)

const containers = document.getElementsByClassName('container');

for (let container of containers) {
  for (const item of container.children) {
    item.className += ' menu';
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 20px 0;
}

.menu {
  flex: 1 1 auto;
  height: 50px;
  background: lightgrey;
  
  /* Just to align them to center and style them */
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border: 1px solid #aaa;
  margin-left: -1px;
};

<div class="container">
  <div>Menu 1</div>
  <div>Menu 2</div>
  <div>Menu 3</div>
  <div>Menu 4</div>
</div>

<div class="container">
  <div>Menu 1</div>
  <div>Menu 2</div>
  <div>Menu 3</div>
</div>