Add active class dynamically to menu and its submenu using jquery

Question

I create an application in asp.net mvc. This is a code of HTML that I created for navigation bar.

<div id="sidebar" class="nav-collapse">          
            <div class="leftside-navigation">
                <ul class="sidebar-menu" id="nav-accordion">
                    <li>
                        <a href="#" class="active">
                            <i class="fa fa-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;" class="dcjq-parent">
                            <i class="fa fa-book"></i>
                            <span>Masters</span>
                        </a>
                        <ul class="sub">
                            <li><a href="@Url.Action("BankDetails","BankDetailMasters")">Bank</a></li>
                            <li class="sub-menu">
                                <a href="javascript:;">
                                    <span>Calibration</span>
                                </a>
                                <ul class="sub">
                                    <li><a href="@Url.Action("CalibrationCycleTypeDetails","CalibrationCycleType")">Cycle Type</a></li>
                                    <li><a href="@Url.Action("CalibrationStatusDetails", "CalibrationStatus")">Status</a></li>
                                </ul>
                            </li>
                            <li><a href="@Url.Action("CompanyDetail","CompanyDetails")">Company</a></li>
                            <li><a href="@Url.Action("CurrencyDetail","Currency")">Currency</a></li>
                            <li><a href="@Url.Action("CustomerDetail","Customer")">Customer</a></li>
                            <li><a href="@Url.Action("DepartmentDetail","Department")">Department</a></li>
                            <li><a href="@Url.Action("EmployeeDetail","Employee")">Employee</a></li>
                            <li><a href="@Url.Action("IndustryTypeDetail", "IndustryType")">Industry Type</a></li>
                            <li><a href="@Url.Action("ShippingAgentDetail", "ShippingAgent")">Shipping Agent</a></li>
                            <li><a href="@Url.Action("StateDetail", "State")">State</a></li>
                            <li><a href="@Url.Action("SupplierDetail", "Supplier")">Supplier</a></li>
                            <li><a href="@Url.Action("TransporterDetail", "Transporter")">Transporter</a></li>
                            <li><a href="@Url.Action("UnitDetails", "Unit")">Unit</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Now i want to add "active" class in li's a tag.

when it has sub menu than add "dcjq-parent" & "active" in li's a. and add "active" class in its li's a tag

here is my "dcjq-parent" class

ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
background: #28282e;
color: #1FB5AD;
display: block;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

}

here is my jaquery

$('#sidebar .leftside-navigation > ul li ul.sub li').click(function (e) {
            var $this = $(this);
            $this.addClass('active');
            $this.find('.dcjq-parent').addClass('active');
});

Hope someone will help me out. Thank you.

Answer 1

try below code,

In your code you are going to call $(this) means li of your '.sub' class which does not contain '.dcjq-parent' so jauery couldn't find it and your result less. So to access your parent you need a parent() of jauery to go to thru the hierarchy.

$(".sub li").click(function(){
$(this).addClass('active');
            $(this).parent().parent().find('.dcjq-parent').addClass('active');
});

.active{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="sidebar" class="nav-collapse">          
				<div class="leftside-navigation">
					<ul class="sidebar-menu" id="nav-accordion">
						<li>
							<a href="#" class="active">
								<i class="fa fa-dashboard"></i>
								<span>Dashboard</span>
							</a>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="dcjq-parent">
								<i class="fa fa-book"></i>
								<span>Masters</span>
							</a>
							<ul class="sub">
								<li><a href="#">Bank</a></li>
								<li class="sub-menu">
									<a href="javascript:;">
										<span>Calibration</span>
									</a>
									<ul class="sub">
										<li><a href="#">Cycle Type</a></li>
										<li><a href="#">Status</a></li>
									</ul>
								</li>
								<li><a href="#">Company</a></li>
								<li><a href="#">Currency</a></li>
								<li><a href="#">Customer</a></li>
								<li><a href="#">Department</a></li>
								<li><a href="#">Employee</a></li>
								<li><a href="#">Industry Type</a></li>
								<li><a href="#">Shipping Agent</a></li>
								<li><a href="#">State</a></li>
								<li><a href="#">Supplier</a></li>
								<li><a href="#">Transporter</a></li>
								<li><a href="#">Unit</a></li>
							</ul>
						</li>
					</ul>
				</div>