我为我的网站设计了一个Bootstrap菜单。
在桌面上，网站运行良好，完全没有问题。
在手机上，我有一个问题似乎无法解决......
菜单设计如下：
<body class="background">
<nav class="content">
<ul class="exo-menu">
<li><a class="active" href="/"><i class="fa fa-home"></i> Home</a></li>
<li class="mega-drop-down"><a href="#" onclick="return false"><i class="fa"></i> Brands</a>
<div class="animated fadeIn mega-menu">
<div class="mega-menu-wrap">
<div class="row">
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane active" id="A">
<ul class="nav-list list-inline list-inline2">
<li><a data-filter=".89" href="/brand/product"><img src="/wp-content/themes/mytheme/images/image.png" alt="Image"><span></span></a></li>
</ul>
</div>
<div class="tab-pane" id="B">
<ul class="nav-list list-inline col-md-2">
<li><a href="/brand/productb"><span>productb</span></a></li>
</ul>
</div>
<ul class="nav nav-tabs" role="tablist">
<li class="active change"><a href="#A" role="tab" data-toggle="tab">A</a></li>
<li class="change"><a href="#B" role="tab" data-toggle="tab">#B</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#" onclick="return false"><i class="fa"></i> CATEGORIES</a>
<div class="animated fadeIn mega-menu mega-menu2">
<div class="mega-menu-wrap">
<div class="row">
<div class="container-fluid">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active">
<ul class="nav-list list-inline col-lg-12">
<ul class="nav-list list-inline col-md-4">
<li class="dropdown-header"><a href="/product-category/catA">CatA</a></li>
</ul>
<ul class="nav-list list-inline col-md-4">
<li class="dropdown-header"><a href="/product-category/CatB">CatB</a></li>
<li Class= "dropdown-info"><a href="/product-category/CatBa">CatBa</a></li>
<li Class= "dropdown-info"><a href="/product-category/CatBb">CatBb</a></li>
<li Class= "dropdown-info"><a href="/product-category/CatBc">CatBc</a></li>
<li Class= "dropdown-info"><a href="/product-category/CatBd">CatBd</a></li>
</ul>
<ul class="nav-list list-inline col-md-4">
<li class="dropdown-header"><a href="/product-category/CatC">CatC</a></li>
<li Class= "dropdown-info"><a href="/product-category/CatCa">CatCa</a></li>
<li Class= "dropdown-info"><a href="/product-category/CatCb">b</a></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
如果在打开品牌标签后点击类别标签，则会出现问题。 查看品牌后，如果我点击类别，则会打开该选项卡并将类别标题放在页面顶部。标题下的子类别会被自动点击并加载该页面。
我不确定是否有任何方法可以避免这种情况发生。
jQueryI使用的是：
<script>
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
</script>
有没有办法可以在菜单开启时略有延迟，比如.5s，但只能在移动设备上才能阻止这种情况发生？
任何帮助都会很棒