* 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");
}
}
}
}