啃筆記

目前只有主選單與子選單兩層做判斷
切換頁面時不論是否有多一層下拉選單，都能夠判斷網址顯示active狀態

<ul class="nav navbar-nav" id="menu-bar">
  <li><a href="about.html">關於我們</a>
    <div class="dropdown-menu">
      <ul>
        <li><a href="about1.html">關於我們1</a></li>
        <li><a href="organize.html">關於我們2</a></li>
        <li><a href="organize.html">關於我們3</a></li>
      </ul>
    </div>
  </li>
  <li><a href="news.html">最新消息</a>
    <div class="dropdown-menu">
      <ul>
        <li><a href="news-content.html">最新消息及公告事項</a></li>
      </ul>
    </div>
  </li>
  <li><a href="spread.html">推廣文章</a>
    <div class="dropdown-menu">
      <ul>
        <li><a href="spread-content.html">推廣文章1</a></li>
        <li><a href="spread-content.html">推廣文章2</a></li>
      </ul>
    </div>
  </li>
  <li><a href="service.html">服務項目</a>
    <div class="dropdown-menu">
      <ul>
        <li><a href="service.html">服務項目1</a></li>
        <li><a href="service.html">服務項目2</a></li>
        <li><a href="service.html">服務項目3</a></li>
      </ul>
    </div>
  </li>
  <li><a href="link.html">相關網站</a>
  </li>
  <li><a href="download.html">下載區</a>
  </li>
  <li><a href="sitemap.html">網站地圖</a>
  </li>
</ul>

var menu = document.querySelectorAll('#menu-bar > li > a');
   function currentEvent(splitIndex){                
     //網域/檔名.html
     //menu[i].pathname.split("/") --> 選單網址使用split分割 "/"  變成陣列['網域','index.html']
     //用來抓取正確路徑名稱的index
     //['網域','index.html']
     var splitIndex = splitIndex || 1
     var currentUrl = window.location.pathname.split("/")[splitIndex];
     //第一層選單
     for(var b=0;b< menu.length;b++){
        if(menu[b].pathname.split("/")[splitIndex] === currentUrl) {
           menu[b].className = 'active';
        }
        //第二層選單 判斷子選單是否不為 null
        if(menu[b].nextElementSibling !== null) {
           //- console.log(b, menu[b].nextElementSibling)
           //- menu[b].style.backgroundColor = "#d6d6d6"
        for(var c=0;c< menu[b].nextElementSibling.children[0].children.length;c++){
            if(menu[b].nextElementSibling.children[0].children[c].children[0].pathname.split("/")[splitIndex] === currentUrl) {
               menu[b].className = ' active';
            }
        }
      } 
                    
    }
  }
  currentEvent(2)