I use sidebar submenu in my project. but I have a problem in use nested submenu.
when I click on one submenu, the other submenu is shown. how can I fix this problem?
this is my code:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="KDUIS_v0._1.Site1" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="CssFiles/StyleSheet.css" rel="stylesheet" />
<title><%: Page.Title %> -موسسه غیر انتفاعی توسعه دانش</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var toggle = true;
$(".sidebar-icon").click(function () {
if (toggle) {
$(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({ "position": "absolute" });
}
else {
$(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
setTimeout(function () {
$("#menu span").css({ "position": "relative" });
}, 400);
}
toggle = !toggle;
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style type="text/css">
.auto-style3 {
font-family: tahoma;
}
</style>
</head>
<body style="background-color: #DCDCDC">
<div class="sidebar-menu">
<div style="border-top: 1px solid rgba(69, 74, 84, 0.7)"></div>
<div class="menu">
<ul id="menu">
<li id="menu-home"><a href="ManagementControlPannel.aspx">
<div class="auto-style2">
<i></i><span>راهنمای سایت</span>
</div>
</a>
</li>
<li id="menu-Education">
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>مدیریت آموزش</span>
</div>
</a>
<ul>
<li>
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>واحد درسی</span>
</div>
</a>
<ul id="Menu-Course">
<li id="Menu-Course-sub1"><a href="#">تعریف درس و واحد درسی</a></li>
<li id="Menu-Course-sub2"><a href="#">ویرایش واحد درسی</a></li>
</ul>
</li>
<li>
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>مدیریت انسانی</span>
</div>
</a>
<ul id="Menu-Person">
<li id="Menu-Person-Sub">
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>فرد</span>
</div>
</a>
<ul id="Menu-Person-Manegement">
<li id="Menu-Person-Manegement1">
<a href="#">تعریف فرد</a>
</li>
<li id="Menu-Person-Manegement2">
<a href="#">مدیریت فرد</a>
</li>
</ul>
</li>
<li id="Menu-Student">
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>دانشجو</span>
</div>
</a>
<ul>
<li id="Menu-Student1">
<a href="#">تعریف دانشجو</a>
</li>
<li id="Menu-Student2">
<a href="#">مدیریت دانشجو</a>
</li>
</ul>
</li>
<li id="Menu-Prof">
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>استاد</span>
</div>
</a>
<ul>
<li id="Menu-Prof1">
<a href="#">تعریف استاد</a>
</li>
<li id="Menu-Prof2">
<a href="#">مدیریت استاد</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>انتخاب واحد</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="auto-style2">
<span class="fa fa-angle-left" style="float: left"></span><span>گزارشگیری</span>
</div>
</a>
<ul class="tert-nav">
<li><a href="#">لیست حضور و غیاب</a></li>
<li><a href="#">لیست حضور و غیاب جلسه امتحان</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<form runat="server">
<asp:Label ID="LblFirstName" runat="server" Text="LblFirstName" Visible="False"></asp:Label>
<asp:Label ID="LblLastName" runat="server" Text="LblLastName" Visible="False"></asp:Label>
<asp:Label ID="LblPersonID" runat="server" Text="LblPersonID" Visible="False"></asp:Label>
<div class="Content">
<div class="HeaderDIV">
<div class="ToseeDAnesh">
<strong> <asp:Label ID="Label5" runat="server" Font-Names="Tahoma" Text="موسسه غیر انتفاعی توسعه دانش"></asp:Label>
</strong>
</div>
<div class="LOGO">
<asp:Image ID="Image1" runat="server" ImageUrl="~/pictures/KDUni-Logo-New-ed2-xs.png" />
</div>
</div>
<div class="Header">
<div class="LoginBtn">
<asp:ImageButton ID="BtnLogout" runat="server" Height="52px" ImageAlign="Left" ImageUrl="~/Pictures/start_transport_oman_info_icon_vb_exit.png" ToolTip="خروج" Width="71px" Visible="False" OnClick="BtnLogout_Click" />
<asp:Label ID="LblLogOut" runat="server" Font-Names="Tahoma" Text="خروج" Visible="False"></asp:Label>
<asp:ImageButton ID="BtnLogin" runat="server" Height="47px" ImageUrl="~/Pictures/Login.png" OnClick="BtnLogin_Click" ToolTip="ورود" Width="58px" Visible="False" />
<asp:Label ID="Label4" runat="server" Font-Names="Tahoma" Text="ورود" Visible="False"></asp:Label>
</div>
<div class="LoginStatus">
<asp:Label ID="LblLogin" runat="server" Text="LblLogin" Font-Bold="True" Font-Names="Tahoma" Width="363px"></asp:Label>
</div>
</div>
<div class="page-container">
<div class="MainDIV">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div>
<br />
<footer class="FoteerDIV">
<p>
<asp:Label ID="Label1" runat="server" Text="Label" CssClass="auto-style3"></asp:Label>
</p>
<p>
<asp:Label ID="Label2" runat="server" CssClass="auto-style3" Text="Label"></asp:Label>
</p>
<p> </p>
</footer>
</div>
</div>
</form>
</body>
</html>
