如何在VanillaJavascript中根據選單來控制列？

我想在超過4個選單的情況下，將選單顯示為獨立的欄目。我需要在Vanilla Javascript中實作這一點。下面是我的HTML和CSS，我不確定如何在Vanilla Javascript中實作這一點。誰能指導一下？

.main-nav-list.column{
    column-count: 2;
        column-fill: balance;}

<nav class="main-nav">/span>

    <ul class="main-nav-list">
        <li class="a">  < a href="/">First</a>
          <ul class="main-nav-list"/span>>
                < li class="b"> <。 a href="/">選單型別</a> 
                      < ul class="main-nav-list column" >
                           < li class="c"> < a href="/">Summer< /a> </li> 
                           < li class="c"> < a href="/">Winter< /a> </li> 
                           < li class="c"> < a href="/">所有季節< a> </li>/span>
                           < li class="c"> < a href="/">Spring <。 a> </li>
                                                。   <li class="c"/span>>  <a href="/"/span>> Spring </a> </li>
                                                                            。             <li class="c"/span>>  <a href="/"/span>> Spring </a> </li>
                       </ul>
              </li>
             </ul>
        </li> 
    </ul> 
</nav>/span>

如果有任何幫助，我們將不勝感激。

預先感謝。

uj5u.com熱心網友回復：

我們可以使用display: grid屬性。

.main-nav-list.column{
  display: grid;
  grid-template-rows: repeat(4, 1fr) 。
  grid-auto-flow: column;
}

<nav class="main-nav"> /span>

  <ul class="main-nav-list"/span>>
    <li class="a">  < a href="/">First</a> 
      <ul class="main-nav-list">/span>
        <li class="b">  < a href="/">選單型別</a>/span>
          <ul class="main-nav-list column"/span>>
            <li class="c">  < a href="/">Summer< a> </li>
            <li class="c">  < a href="/">Winter< a> </li>
            <li class="c">  < a href="/">所有季節< a> </li>/span>
            <li class="c">  < a href="/">Spring < /a> </li> 
            <li class="c">  < a href="/">Spring <。 /a> </li> 
            <li class="c">  < a href="/">Spring <。 /a> </li> 
          </ul>/span>
        </li>/span>
      </ul>/span>
    </li>/span>
  </ul>/span>
</nav>/span>

uj5u.com熱心網友回復：

要根據選單來分離列，你可以試試下面的腳本，

 (function columnCount() {
    //get all lists with selected name()
    var lists = document.getElementsByClassName(" column")。

    //loop through all gathered lists.
    for (i = 0; i < lists.length; i  ) {
      //速記元素，便于使用。
      var list = lists[i];
      var items = list.getElementsByTagName("li"/span>)。

      list.className  = items.length < 5 ? " lesscolumn"/span> : " morecolumn"/span>;
    }
  })();

 .lesscolumn {
    column-count: 1;
  }
  .morecolumn {
    column-count: 2;
  }

<nav class="main-nav"> /span>

    <ul class="main-nav-list"/span>>
        <li class="a">  < a href="/">First</a> 
            <ul class="main-nav-list">/span>
                <li class="b">  < a href="/">選單型別</a>/span>
                    <ul class="main-nav-list column"/span>>
                        <li class="c">  < a href="/">Summer< a> </li>
                        <li class="c">  < a href="/">Winter< a> </li>
                        <li class="c">  < a href="/">所有季節< a> </li>/span>
                        <li class="c">  < a href="/">Spring < /a> </li> 
                                                <li class="c">  < a href="/">Spring <。 /a> </li> 
                                                                        <li class="c">  < a href="/">Spring <。 /a> </li> 
                    </ul>/span>
                </li>/span>
            </ul>/span>
        </li>/span>
    </ul>/span>
</nav>/span>

標籤：

上一篇：如何在AndroidXML中把文本設定在圖片下方的左側？

下一篇：2021-10-22 JS學習筆記