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

Question

使用 Joomla 我有 4 个菜单项。其中之一是可选的。如果我想取消发布这个菜单项，其他菜单项的宽度应该增加，但只能在视口最小宽度 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 来向您展示如何将 classes 添加到元素

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

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

无论如何，这就是答案（我会给你 CSS + HTML 我会让你处理 JS 方面，你只需要应用 class 到您的菜单项并 add/delete 按需添加）

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>

Answer 2

如果你想定位 #menu li，你应该这样做：

function changeWidth() {
  var four = document.getElementsByClassName('optMenuitem');
  // You select all the menu items
  var opt = document.querySelectorAll('#menu li');
  if (four == true) {
    // You loop on all of them and you set the width
    for (var i = 0; i < opt.length; i++)
      opt[i].style.width = "25%";
  } else {
    for (var i = 0; i < opt.length; i++)
      opt[i].style.width = "33%";
  }
}

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

Change width of menu items depending on amount of menu items

javascript

css

joomla

menuitem

responsive