Bootstrap 3.0 Multilevel Dropdown

N-Level dropdown menu in twitter bootstrap 3.0

by Liu David

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown" style="position:relative">
	<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">选择日期<span class="caret"></span></a>
	<ul class="dropdown-menu">
  <li>
      <a class="trigger right-caret">2010年</a>
			<ul class="dropdown-menu sub-menu">
				<li><a href="#">1月</a></li>
        <li><a href="#">2月</a></li>
        <li><a href="#">3月</a></li>
        <li><a href="#">1月</a></li>
        <li><a href="#">2月</a></li>
        <li><a href="#">3月</a></li>
			</ul>
		</li>
		<li>
      <a class="trigger right-caret">2011年</a>
			<ul class="dropdown-menu sub-menu">
				<li><a href="#">1月</a></li>
        <li><a href="#">2月</a></li>
        <li><a href="#">3月</a></li>
        <li><a href="#">1月</a></li>
        <li><a href="#">2月</a></li>
        <li><a href="#">3月</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

.dropdown-menu>li
{	position:relative;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left-color:#fff;
	box-shadow:none;
}
.right-caret:after,.left-caret:after
 {	content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
	margin-left:5px;
}
.right-caret:after
{	border-left: 5px solid #ffaf46;
}
.left-caret:after
{	border-right: 5px solid #ffaf46;
}

JavaScript

$(function(){
	$(".dropdown-menu > li > a.trigger").on("click",function(e){
		var current=$(this).next();
		var grandparent=$(this).parent().parent();
		if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
			$(this).toggleClass('right-caret left-caret');
		grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
		grandparent.find(".sub-menu:visible").not(current).hide();
		current.toggle();
		e.stopPropagation();
	});
	$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
		var root=$(this).closest('.dropdown');
		root.find('.left-caret').toggleClass('right-caret left-caret');
		root.find('.sub-menu:visible').hide();
	});
});