>

Joomla 사용하기 4 가지 메뉴 항목이 있습니다. 그중 하나는 선택 사항입니다. 이 메뉴 항목을 게시 취소하려면 다른 메뉴 항목의 너비를 늘려야하지만 뷰포트의 최소 너비는 980px입니다. 메뉴에는 id #menu가 있고 변경하려는 요소 너비는 #menu li입니다. 선택적인 메뉴 항목의 클래스 이름은 .optMenuitem입니다. 4 개의 메뉴 항목의 경우 너비는 25 % 여야하고 3 개의 33.33 %보다 작아야합니다. 나는 sth를 다음과 같이 생각했다 :

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

작동하지 않습니다. 나는 초보자입니다. 어떤 제안?

  • 답변 # 1

    #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

    수정요소에 클래스를 추가하는 방법을 보여주기 위해 간단한 JS를 추가했습니다

    flexboxes를 사용하지 않는 경우 해결책은 다음과 같습니다.

    Flexbox의 유일한 단점은이전 브라우저에서는 작동하지만 이전 브라우저에서는 작동하지 않는다는 것입니다.

    어쨌든 여기에 답이 있습니다 (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>
    
    

관련 자료

  • 이전 macos - OS X에서이 어셈블리 코드를 어떻게 실행할 수 있습니까?
  • 다음 html - 다른 경우 $thisPage를 사용하는 경우 PHP