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来向您展示如何向元素添加类

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

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

无论如何，这里是答案（我将给你CSS + HTML，我将让你处理JS方面，你只需要将类应用于你的菜单项并按需添加/删除它们）

＆＃13;

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

＆＃13;

.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;
};

＆＃13;

<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>

＆＃13;

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%";
  }
}

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

2 个答案: