我正在创建带有标签和下拉菜单的导航菜单。我使用了一个脚本，如果您在下拉菜单中单击，则可以使下拉菜单保持打开状态，但是一旦在外部单击，它将关闭。我需要它对我的嵌套菜单选项保持打开状态，该选项是内部带有选项卡的下拉菜单。我需要选项卡是可切换的，因此为什么我要打开下拉列表。
我的问题是，由于它保持打开状态，因此当我在下拉菜单选项之间切换时，带有选项卡的选项卡保持打开状态并且它们重叠。有人可以帮我重叠吗？我的代码如下。
谢谢！
//keeps it open
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
//closes when you click the body
$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target)
&& $('li.dropdown.mega-dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});<nav class="navbar navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header navbar-static-top" role="navigation" style="background-color:#131c2d;">
<div class="container">
<div class="navbar-header">
<div class="limitnav">
<a class="navbar-brand" href="/" style="margin-bottom:20px;"><img src="https://dummyimage.com/190x110/ee9317/fff.png" alt="SportsLogo.png" style="margin-bottom:7px; height:65px;"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="my-list-style nav navbar-nav navbar-right ">
<li class="dropdown full-width">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
adult sports<span class="limitbrand" style="float:right;"><i class="fas fa-angle-right"></i></span>
</a>
<ul class="dropdown-navmenu full-width">
<div class="container">
<div class="row">
<div class="Main-Info">
<h1 style="text-align:left;padding-left:15px;">Adult Sports</h1>
<div class="col-xs-12 col-sm-8 col-lg-3">
<p align="left">The adult sports program is geared for adults who have a love to play sports at any level. We strive to run first class leagues, from our facilities, administration and the captains who help support our teams. All are welcome and we encourage you to bring a friend!</p>
</div>
<!--Adult Sports-->
<div class="col-xs-12 col-sm-8 col-lg-9">
<!--sports links-->
<div class="container" style="width:100%!important; padding-left:30px;">
<div class="row">
<div class="sports">
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/190x110/ee9317/fff.png" class=" img-responsive" alt="basketball.png" align="middle"></a>
<h4>Men's Basketball</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/190x110/ee9317/fff.png" class=" img-responsive" alt="volleyball.png" align="middle"></a>
<h4>Volleyball</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/190x110/ee9317/fff.png" class=" img-responsive" alt="soccer.png" align="middle"></a>
<h4>CoEd (Futsal) Soccer</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<!-- <a href="/page/1443"><img src="https://dummyimage.com/190x110/ee9317/fff.png&text=190x110(softball)" class=" img-responsive" alt="softball.png" align="middle"></a>
<h4>Softball</h4>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</li>
<!--Youth sports-->
<li class="dropdown mega-dropdown full-width">
<a href="javascript:void(0);" class="dropdown-toggle" role="button" aria-expanded="false">Youth Sports<span class="limitbrand" style="float:right;"><i class="fas fa-angle-right"></i></span></a>
<ul class=" dropdown-navmenu full-width">
<div class="container">
<div class="row">
<div class="Main-Info">
<h1 style="text-align:left;padding-left:15px;">Youth Sports</h1>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- Nav tabs -->
<div class="container">
<ul class="nav nav-tabs" style="position:initial;">
<li role="presentation" class="active OPEN"><a href="#rec" aria-controls="rec" role="tab" data-toggle="tab" style="font-size:30px; background-color:transparent;">rec</a></li>
<li role="presentation" style="font-size:30px; background-color:transparent;">|</li>
<li role="presentation"><a href="#club" aria-controls="club" role="tab" data-toggle="tab" style="font-size:30px; background-color:transparent; ">Club</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!--rec tab-->
<div role="tabpanel" class="tab-pane fade in active" id="rec">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-3">
<p align="left">The youth sports program is geared for kids who have a love to play sports at any level. We strive to run first class leagues, from our facilities, administration and the captains who help support our teams. All are welcome and we encourage you to bring a friend!!</p>
</div>
<div class="col-xs-12 col-sm-8 col-lg-9">
<!--sports links-->
<div class="container" style="width:100%!important;">
<div class="row">
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="youth_basketball.png" align="middle"></a>
<h4>Basketball Club</h4>
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="martial_arts.png" align="middle"></a>
<h4>Martial Arts</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="youth_basketball.png" align="middle"></a>
<h4>Basketball</h4>
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="surfing.png" align="middle"></a>
<h4>Surfing</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="soccer.png" align="middle"></a>
<h4>Soccer</h4>
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="camps.png" align="middle"></a>
<h4>Sports Camps</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class=" img-responsive" alt="volleyball.png" align="middle"></a>
<h4>Volleyball</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--club tab-->
<div role="tabpanel" class="tab-pane fade Active" id="club">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-3">
<p align="left">The youth sports program is geared for kids who have a love to play sports at any level. We strive to run first class leagues, from our facilities, administration and the captains who help support our teams. All are welcome and we encourage you to bring a friend!</p>
</div>
<div class="col-xs-12 col-sm-12 col-lg-9">
<!--sports links-->
<div class="container" style="width:100%!important;">
<div class="row">
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="youth_basketball.png" align="middle"></a>
<h4>Basketball Club</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class="img-responsive" alt="youth_basketball.png" align="middle"></a>
<h4>Basketball</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</li>
<!--rec and fitness-->
<li class="dropdown mega-dropdown full-width">
<a href="javascript:void(0);" class="dropdown-toggle" role="button" aria-expanded="false">Rec & Fitness<span class="limitbrand" style="float:right;"><i class="fas fa-angle-right"></i></span></a>
<ul class=" dropdown-navmenu full-width">
<div class="main-info">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- Nav tabs -->
<div class="container">
<ul class="nav nav-tabs" style="position:initial;">
<li role="presentation" class="active open"><a href="#recF" aria-controls="recF" role="tab" data-toggle="tab" aria-expanded="true" style="font-size:30px; background-color:transparent;">rec</a></li>
<li role="presentation" style="font-size:30px; background-color:transparent;">|</li>
<li role="presentation"><a href="#fitness" aria-controls="fitness" role="tab" data-toggle="tab" aria-expanded="true" style="font-size:30px; background-color:transparent; ">fitness</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!--rec tab-->
<div role="tabpanel" class="tab-pane fade in active" id="recF">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-3">
<p align="left">The adult sports program is geared for adults who have a love to play sports at any level. We strive to run first class leagues, from our facilities, administration and the captains who help support our teams. All are welcome and we encourage you to bring a friend!</p>
</div>
<div class="col-xs-12 col-sm-8 col-lg-9">
<!--sports links-->
<div class="container" style="width:100%!important;">
<div class="row">
<div class="col-xs-6 col-sm-3 col-lg-3">
<!--gOLF cLUB-->
<a href="/#"><img src="#" alt="Golf+Club.png" align="middle"></a>
<h4>Golf Club</h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<!--tRIATHLON-->
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class=" img-responsive" alt="Triathalon+Training.png" align="middle"></a>
<h4> Triathlon Training</h4>
<!--Hiking-->
<!--<a href="/page/1460"><img src="/Content/Sports/v2/stockimages/RecHiking2.png" class=" img-responsive" alt="Hiking.png" align="middle" width="190px" height="110px"></a>
<h4>Hiking</h4>-->
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<!--mOUNTAIN bIKING-->
<a href="#"><img src="/https://dummyimage.com/124x100/000/fff.png" class=" img-responsive" alt="MBRC2.png" align="middle"></a>
<h4>Mountain Biking </h4>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="#"><img src="https://dummyimage.com/124x100/000/fff.png" class=" img-responsive" alt="Road+Cycling.png" align="middle"></a>
<h4>Road Cycling</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--fitness tab-->
<div role="tabpanel" class="tab-pane fade" id="fitness">
<div class="container">
<div class="row">
<!--
<div class="col-xs-12 col-sm-8 col-lg-3">
<p align="left">The adult sports program is geared for adults who have a love to play sports at any level. We strive to run first class leagues, from our facilities, administration and the captains who help support our teams. All are welcome and we encourage you to bring a friend!</p>
</div>-->
<div class="col-xs-12 col-sm-12 col-lg-12">
<!--sports links-->
<div class="container" style="width:100%!important;">
<div class="row">
<!--
<div class="col-xs-6 col-sm-3 col-lg-3">
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<!-- </div>
<div class="col-xs-6 col-sm-3 col-lg-3">
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
</div>-->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4" align="center;">COMING SOON!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>