原生JS实现下拉选项效果

// html
  <div class="filter" id="filter">
     <dl>
        <dt>爱好</dt>
        <dd>
          <ul>
            <li class="active">运动</li>
            <li>购物</li>
            <li>旅游</li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt>学习</dt>
        <dd>
          <ul>
            <li>图书</li>
            <li>笔</li>
            <li>文具</li>
          </ul>
        </dd>
      </dl>
      ....
    </div> 

// js
(function() {
  var f = document.getElementById('filter');
  f.addEventListener('click', function(e){
    var targetParentNode = e.target.parentNode;
    var dlList = siblings(targetParentNode);
    // 移除兄弟元素上的active
    dlList.forEach(function(item) {
      if(hasClassName(item, 'active')){
        removeClass(item, 'active');
      }
    })
    hasClassName(targetParentNode, 'active') 
        ? removeClass(targetParentNode, 'active')
        : addClass(targetParentNode, 'active');
  })

  //获取所有兄弟元素
  function siblings(elm) {
    var brothers = [];
    var p = elm.parentNode.children;
    for(var i = 0, pl = p.length; i < pl; i++){
      if(p[i] !== elm) {
        brothers.push(p[i]);
      }
    }
    return brothers;
  }
  // 是否包含某个className
  function hasClassName(obj, name){
    let tmpName = obj.className;
    let tmpReg = new RegExp(name,'g');
    if(tmpReg.test(tmpName)){
        return true;
    }else{
        return false;
    }
  }
  
  // 添加className
  function addClass(elem, className) {
    if(!new RegExp("(^|\\s)" + className + "(\\s|$)").test(elem.className)){     
      elem.className += ' ' + className;
    }
  }
  // 移除className
  function removeClass(elem, className) {
     elem.className = elem.className.replace(new RegExp("(^|\\s)" + className + " (?=(\\s|$))", "g"), '');
  }

})()


//  含有className 首尾有空白符或者什么都没有的的字符串
// ^|\\s+ 表示什么都没有（起始位置）或者 空白符
// \\s+|$ 表示 空白符或者什么都没有（结束位置）