Javascript 引导抽屉下拉导航菜单

。 这是我的密码

我的导航菜单是引导下拉菜单。我自定义引导菜单。使用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 -->  

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>

$（'[role*=“tablist”]a'）。单击（函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
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（）；
}否则{
//从所有导航元素中删除类。
$（'.navbar-nav'）.find（'a'）.removeClass（'data-tab-open'）；
$（'.navbar-nav'）.find（'.caret'）.removeClass（'rotate180'）；
$（'.navbar-nav'）.find（'.active'）.removeClass（'active'）；
//拿出抽屉。
if（window.matchMedia（（（最大宽度：767px）”）.matches）{
$（this.parent（）.append（$（'.nav drawer'））；
}否则{
$（'.navbar'）.append（$（'.navdrawer'））；
}
$（'.nav drawer'）.show（）；
$（this.tab（'show'）；
$（this.addClass（'data-tab-open'）；
$（this）.children（'.caret'）.addClass（'rotate180'）；
}
});
$（'.nav抽屉a'）。单击（功能（e）{
e、 停止传播（）；
});
$（'body'）.children（）.not（'.navbar a'）。not（'.nav drawer a'）。not（'.navbar toggle'）。单击（函数（e）{
$（'.navbar-nav'）.find（'a'）.removeClass（'data-tab-open'）；
$（'.navbar-nav'）.find（'.caret'）.removeClass（'rotate180'）；
$（'.navbar-nav'）.find（'.active'）.removeClass（'active'）；
$（'.nav drawer'）.hide（）；
}); 

看看这个。你能自定义我的代码吗？@编码Enthusiast@rahavard我会参考编码爱好者为实现您的目标所做的工作。所以这不是一个让别人为你工作的网站不，我不想让任何人为我工作。。我写了完整的代码，但在执行代码中出现了一个问题

<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>