用jquery和bootstrap写一个左侧的菜单栏，要求主体颜色为天蓝色，被选中的菜单项为银色，每个菜单项的前方需要有一个箭头，当时该项被选择后箭头旋转90度，并且展开它的二级菜单

HTML代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active">
          <a href="#">
            <i class="glyphicon glyphicon-menu-right"></i>
            菜单1 <span class="sr-only">(current)</span>
          </a>
          <ul class="nav-submenu">
            <li><a href="#">子菜单1-1</a></li>
            <li><a href="#">子菜单1-2</a></li>
            <li><a href="#">子菜单1-3</a></li>
          </ul>
        </li>
        <li>
          <a href="#">
            <i class="glyphicon glyphicon-menu-right"></i>
            菜单2
          </a>
          <ul class="nav-submenu">
            <li><a href="#">子菜单2-1</a></li>
            <li><a href="#">子菜单2-2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">
            <i class="glyphicon glyphicon-menu-right"></i>
            菜单3
          </a>
          <ul class="nav-submenu">
            <li><a href="#">子菜单3-1</a></li>
            <li><a href="#">子菜单3-2</a></li>
            <li><a href="#">子菜单3-3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-10 main">
      <h1>主体内容</h1>
    </div>
  </div>
</div>

CSS代码：

.sidebar {
  background-color: #fff;
  border-right: 1px solid #ddd;
}
.nav-sidebar li a {
  color: #333;
}
.nav-sidebar li.active a,
.nav-sidebar li a:hover {
  background-color: #f5f5f5;
  color: #333;
}
.nav-submenu {
  display: none;
}
.nav-submenu li a {
  color: #333;
}
.nav-submenu li.active a,
.nav-submenu li a:hover {
  background-color: #eee;
  color: #333;
}

JavaScript代码：

$(function() {
  // 打开默认的菜单项
  $('.nav-sidebar li.active .nav-submenu').slideDown();

  // 菜单项点击事件
  $('.nav-sidebar li a').click(function() {
    var $submenu = $(this).siblings('.nav-submenu');
    if ($submenu.length > 0) {
      // 点击有二级菜单的项
      if ($submenu.is(':hidden')) {
        // 展开二级菜单
        $submenu.slideDown();
        // 箭头旋转90度
        $(this).find('i').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
        // 添加选中样式
        $(this).parent().addClass('active');
      } else {
        // 收起二级菜单
        $submenu.slideUp();
        // 箭头还原
        $(this).find('i').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
        // 移除选中样式
        $(this).parent().removeClass('active');
      }
      return false;
    }
  });
});

效果如下图所示：