Bootstrap Drawer下拉导航菜单

Question

。 这是我的代码。

我的导航菜单是bootstrap下拉菜单。我自定义bootstrap菜单。用css和javascrip。

在新导航菜单中点击标题开头底线。

现在我想点击每个图标打开新的底线。

我该怎么办？

1. 这是我的自定义导航菜单

现在我想要这个。

示例网站，请将鼠标悬停在导航菜单上。

http://www.digikala.com/

Hml代码：

<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">دسته:</a>
    </div> <!-- /.navbar-header -->
    <div class="collapse navbar-collapse">
  <ul class="nav navbar-nav" role="tablist">
    <li><a href="#nav-home">Home <span class="caret"></span></a></li>
    <li><a href="#nav-another-page">Another Page <span class="caret"></span></a></li>
    <li><a href="#nav-third-page">Third Page <span class="caret"></span></a></li>
  </ul>
    </div> <!-- /.collapse .navbar-collapse -->
  </div> <!-- /.container-fluid -->
  <div class="nav-drawer">
    <div class="tab-content">
      <div class="tab-pane" id="nav-home">
        <div class="container-fluid">
          <div class="row">
            <ul class="nav col-sm-12 col-xs-12 col-md-1 col-lg-1">
              <li><a class="colory"  href="#"><img src="img/aa.png">گوشی </a></li>



            </ul>
            <ul class="nav col-sm-12 col-xs-12 col-md-1 col-lg-1">
              <li><a class="colory" href="#"><img src="img/Black_Laptop_32.png"> لپ تاپ </a></li>

            </ul>
            <ul class="nav col-sm-12 col-xs-12 col-md-1 col-lg-1">
              <li><a class="colory" href="#"><img src="img/Monitor_and_computer_mouse_32.png"> رایانه </a></li>

            </ul>
            <ul class="nav col-sm-12 col-xs-12 col-md-1 col-lg-1">
              <li><a  class="colory" href="#"><img src="img/Tablet_32.png"> تبلت</a></li>

            </ul>
            <ul class="nav col-sm-12 col-xs-12 col-md-1 col-lg-1">
              <li><a class="colory"  href="#"><img src="img/Photo_camera_with_a_flash_32.png"> دوربین</a></li>

            </ul>
            <ul class="nav col-sm-12 col-xs-12 col-md-1 col-lg-1">
              <li><a class="colory"   href="#"><img src="img/Sell_Product_32.png">جانبی </a></li>

            </ul>
          </div> <!-- /.row -->
        </div> <!-- /.container-fluid -->
      </div>
      <div class="tab-pane" id="nav-another-page">
        <ul class="nav">
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
          <li><a href="#">Link 6</a></li>
        </ul>
      </div>
      <div class="tab-pane" id="nav-third-page">
        <ul class="nav">
          <li><a href="#">Link 7</a></li>
          <li><a href="#">Link 8</a></li>
          <li><a href="#">Link 9</a></li>
        </ul>
      </div>
    </div> <!-- /.tab-content -->
  </div> <!-- /.nav-drawer -->
</div> <!-- /.navbar -->  

CSS代码：   / ---导航 - 菜单 /

  .navbar-nav .active a {
  background: rgba(255, 252, 252, 0.125) !important;
}
.navbar-nav .active a:hover{

    color:#000;

}
.tab-content {
    background: rgba(250, 255, 231, 0.64);
  border-top: 3px solid #E81C1C;
}
.rotate180 {
  transform: rotate(180deg);
}

javascript代码：

<script type="text/javascript">
$('[role*="tablist"] a').click(function (e) {
  e.preventDefault();
  e.stopPropagation();
  if ($(this).hasClass('data-tab-open')) {
    $(this).removeClass('data-tab-open');
    $(this).children('.caret').removeClass('rotate180');
    $('.navbar-nav').find('.active').removeClass('active');
    $('.nav-drawer').hide();
  } else {
    // Remove classes from all nav elements.
    $('.navbar-nav').find('a').removeClass('data-tab-open');
    $('.navbar-nav').find('.caret').removeClass('rotate180');
    $('.navbar-nav').find('.active').removeClass('active');

    // Show the drawer.
    if (window.matchMedia("(max-width: 767px)").matches) {
      $(this).parent().append($('.nav-drawer'));
    } else {
      $('.navbar').append($('.nav-drawer'));
    }
    $('.nav-drawer').show();
    $(this).tab('show');
    $(this).addClass('data-tab-open');
    $(this).children('.caret').addClass('rotate180');  
  }

});

$('.nav-drawer a').click(function(e) {
  e.stopPropagation();
});

$('body').children().not('.navbar a').not('.nav-drawer a').not('.navbar-toggle').click(function (e){
  $('.navbar-nav').find('a').removeClass('data-tab-open');
  $('.navbar-nav').find('.caret').removeClass('rotate180');
  $('.navbar-nav').find('.active').removeClass('active');
  $('.nav-drawer').hide();
}); 

</script>