使用jQuery在菜单及其子菜单中动态添加活动类

jrcvhitl 于 2023-04-05 发布在 jQuery

关注(0)|答案(3)|浏览(113)

我在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的a标签中添加“active”类。
当它有子菜单时，在li的a中添加"dcjq-parent"和"active"，并在li的a标签中添加“active”类
下面是我的“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;

}
这是我珠宝

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

希望有人能帮我。谢谢。

jquery

来源：https://stackoverflow.com/questions/52552523/add-active-class-dynamically-to-menu-and-its-submenu-using-jquery

3条答案

按热度按时间

omhiaaxx1#

试试下面的代码
在你的代码中，你将调用$（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>

赞(0）回复(0）举报 2023-04-05

dgenwo3n2#

不知道我是否已经拿起你错误的位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');

}）;

赞(0）回复(0）举报 2023-04-05

tvokkenx3#

使用jQuery尝试此代码，它可以正常工作

$(function () {
        setNavigation();
    });

    function setNavigation() {
        var path = window.location.pathname;
        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        $("#sidemenu .nav-item .nav-link").each(function () {
            var href = $(this).attr('href');
            if (path.substring(0, href.length) === href) {
                $(this).closest('a').addClass('active');
            }
        });

        $("#sidemenu .nav-item ul li a").each(function () {
            var href = $(this).attr('href');
            if (path.substring(0, href.length) === href) {
                $(this).closest('a').addClass('active');
                $(this).parent().parent().parent().find('.nav-content').addClass('show');
                $(this).parent().parent().parent().find('.nav-link').addClass('active');
            }
        });
    }

<li class="nav-item">
            <a class="nav-link collapsed" href="javascript:;">Parent</a>
            <ul class="nav-content collapse">
                <li>
                    <a href="#">Child-1</a>
                </li>
                <li>
                    <a href="#">Child-2</a>
                </li>
                <li>
                    <a href="#">Child-3</a>
                </li>
            </ul>
        </li>
  
  </ul>

赞(0）回复(0）举报 2023-04-05

我来回答

使用jQuery在菜单及其子菜单中动态添加活动类

3条答案

相关问题

热门标签

最新问答