So if I click a button on the navbar, and the drop down menu opens up, but then I click another button at the top of the navbar, I get another dropdown open, but the first one does not close. How can I make the other one close if another button is clicked, or if the user clicks on the main page?
<!DOCTYPE html>
<html>
<head>
<link href="\stylesheet.css" rel="stylesheet"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
function active()
{
var search = document.getElementById('search');
if (search.value == "") {
search.value = "";
search.placeholder = "Search...";
}
}
function inactive()
{
var search = document.getElementById('search');
if (search.value == "Search...") {
search.value = "Search...";
search.placeholder = "";
}
}
</script>
</head>
<body id="layoutBody">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div>
<img src="~/Content/Images/sm_logo.png" alt="sm_logo">
<img src="~/Content/Images/logo.png" alt="logo">
</div>
</div>
<div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse parentMenu">
<ul id="mainbar" class="nav navbar-nav">
<li class="active">
<a>
Home
</a>
</li>
<li>
<a data-toggle="collapse"
data-target=".navbar-collapse2">
Our Company
</a>
</li>
<li>
<a data-toggle="collapse"
data-target=".navbar-collapse3">
Employee Services
</a>
</li>
<li>
<a data-toggle="collapse"
data-target=".navbar-collapse4">
Support
</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse2 childMenu">
<ul id="OurCompanyTabs" class="nav nav-stacked">
<li id="layoutlist" class="active"><a>@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
<li id="layoutlist"><a>@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
</ul>
</div>
<div class="collapse navbar-collapse3 childMenu">
<ul id="EmployeeServicesTabs" class="nav nav-stacked">
<li id="layoutlist" class="active"><a data-toggle="collapse" data-target=".navbar-collapse5">Forms</a></li>
<li id="layoutlist"><a>Pay Stubs</a></li>
<li id="layoutlist"><a>Insurance Benefits Portal</a></li>
</ul>
</div>
<div class="collapse navbar-collapse4 childMenu">
<ul id="SupportTabs" class="nav nav-stacked">
<li id="layoutlist" class="active"><a>ISS Support Request</a></li>
<li id="layoutlist"><a>Purchase Request</a></li>
<li id="layoutlist"><a>Maint Request</a></li>
</ul>
</div>
<div class="collapse navbar-collapse5 childMenu">
<ul id="forms" class="nav nav-stacked nav">
<li id="formsChild" class="active"><a data-toggle="collapse" data-target=".navbar-collapse6">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
<li id="formsChild"><a data-toggle="collapse" data-target=".navbar-collapse7">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
<li id="formsChild"><a data-toggle="collapse" data-target=".navbar-collapse8">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
<li id="formsChild"><a data-toggle="collapse" data-target=".navbar-collapse9">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
</ul>
</div>
<div class="collapse navbar-collapse6 childMenu">
<ul class="nav navbar-nav">
<li class="active"><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
</ul>
</div>
<div class="collapse navbar-collapse7 childMenu">
<ul class="nav navbar-nav">
<li class="active"><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
</ul>
</div>
<div class="collapse navbar-collapse8 childMenu">
<ul class="nav navbar-nav">
<li class="active"><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
</ul>
</div>
<div class="collapse navbar-collapse8 childMenu">
<ul class="nav navbar-nav">
<li class="active"><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
<li><a>Insert form name here</a></li>
</ul>
</div>
<form id="searchbar" method="post">
<input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
<input type="submit" id="searchbutton" value="Go!" />
</form>
<!--/.nav-collapse -->
</div>
</div>
<script>
// when menu item clicked
$('.collapse').click(function () {
// close navbar if open
$(".navbar-toggle:not(.collapsed)").click();
$(this).removeClass("in").addClass("collapse");
$(".navbar-default .in").removeClass("in").addClass("collapse");
});
// when menu item clicked
$('.navbar-toggle').click(function () {
// close navbar if open
$(".navbar-toggle:not(.collapsed)").click();
$(this).removeClass("in").addClass("collapse");
$(".childMenu.in").removeClass("in").addClass("collapse");
});
</script>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr/>
<footer>
<p>© @DateTime.Now.Year - SC2 MyLink</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
#layoutBody {
background: #353c3e;
color: white;
}
#mainbar {
margin-top: 4%;
}
#OurCompanyTabs {
margin-left: 28.5%;
position: absolute;
z-index: 105;
background-color: #555555;
}
#EmployeeServicesTabs {
margin-left: 36%;
position: absolute;
z-index: 106;
background-color: #555555;
}
#SupportTabs {
margin-left: 46%;
position: absolute;
z-index: 107;
background-color: #555555;
}
#layoutlist a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
#layoutlist a:hover {
background-color: #555;
color: white;
}
#searchbar {
float: right;
}
#forms {
position: absolute;
z-index: 109;
margin-left: 48.5%;
background-color: #555555;
}
#formsChild {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#formsChild a:hover {
background-color: #555;
color: white;
}