dropdown 下拉菜單

* html

<ul>
          <li class="label-item title-active">示範校<a href="javascript:;" class="caret"></a>
            <ul class="dropdown dropdown-toggle">
              <li>開封</li><li>濮陽</li><li>商丘</li><li>許昌</li>
            </ul>
          </li>
          <li class="label-item">合做媒體</li>
          <li class="label-item">平臺活動</li>
          <li class="label-item">精品課程</li>
        </ul>

* css

/** begin dropdown ***/
.label-item .caret + .dropdown {
    background-color: #fff;
    border-radius: 8px;
    z-index: 2;
    width: 100px;
    margin: 10px 0 0 120px;
    display: none;
    position: absolute;
}

/* #module-switch > .module-title > ul > .label-item:hover .dropdown {display: block;} */
.label-item .caret + .dropdown.open {
  display: block;
}

.label-item .caret + .dropdown > li {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  border-bottom: 1px solid #eee; 
}

.label-item .caret + .dropdown > li:last-child {
  border: none;
}
/** end dropdown ***/

*javascript

function trigger(dom, event) {
    var myEvent = document.createEvent('Event');
    myEvent.initEvent(event, true, true);
    dom.dispatchEvent(myEvent);
}
//drop down
var caret = document.querySelector(".caret");
caret.onclick = function(e) {
	trigger(caret.nextElementSibling, "click");
};
var dropdowns = document.getElementsByClassName("dropdown");

function toggleDropdown(i,n) {
	// hide other drop down windows
	for (j = 0; j < n; j++) {
		if (j===i)
			dropdowns[i].classList.add("open");
		else 			
			dropdowns[j].classList.remove("open");
	}
	
}

for (var i = 0; i < dropdowns.length; i++) {
	dropdowns[i].onclick = function(i, n) {
		return function(e) {
			toggleDropdown(i,n);
		}
	}(i, dropdowns.length);
}

// close the drop down if the user clicks outside of it
window.onclick = function(event) {
	if (!event.target.matches(".caret") && !event.target.matches(".dropdown-toggle")) {
		var dropdown = document.getElementsByClassName("dropdown");
		for (i = 0; i < dropdowns.length; i++) {
			var openDropdown = dropdowns[i];
			if (openDropdown.classList.contains("open")) {
				openDropdown.classList.remove("open");
			}
		}
	}
}