Question

我在asp.net mvc中创建了一个应用程序。这是我为导航栏创建的HTML代码。

<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>

现在我想在li的标签中添加“活动”类。

当具有子菜单时，在li的a中添加"dcjq-parent"和"active"。并在其li的标签中添加“活动”类

这是我的“ dcjq-parent”课程

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;

}

这是我的jaquery

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

希望有人会帮助我。谢谢。

Answer 1

不确定我是否接错了您的标记中不存在的dcjq-parent位？

这应该有效

https://jsfiddle.net/0Lvhx5bm/2/

$('ul.sub li').click(function (e) {
    var $this = $(this);
    $this.addClass('active').addClass('dcjq-parent');
    $('.dcjq-parent.active > a').addClass('active');

}）;

Answer 2

尝试以下代码，

在您的代码中，您将调用$（this）表示您的'.sub'类的li，其中不包含'.dcjq-parent'，因此jauery找不到它并且结果更少。因此，要访问您的父级，您需要jauery的parent（）才能遍历层次结构。

$(".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>

使用jquery

2 个答案: