logo标签列表

使用jQuery动态地向菜单及其子菜单添加活动类。

jqueryhtml
3

我创建了一个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;

这是我的jQuery代码：

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

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

1
"dcjq-parent"类在哪里？ - Llazar
"dcjq-parent" 是一个用于设置字体颜色格式的自定义类。 - Niharika Vachhani
当任何一个li具有子菜单时，将"dcjq-parent"类添加到该li的a标签中。 - Niharika Vachhani
你必须展示使用find的代码，因为你正在使用这个类。 - Llazar
好的，我在我的问题中进行了更新。 - Niharika Vachhani
3个回答
1

使用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>
1
尝试以下代码，
在您的代码中，您将调用$(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>

我觉得它是起作用的，但问题是当页面重新加载时它不工作。 - Niharika Vachhani
为了实现相同的效果，你需要在每个页面上进行处理。比如当你点击“bank”时，你需要在银行页面或cshtml页面上添加相同的jQuery代码。在每个子页面上，你需要保持当前页面的活动状态，并且同时保持层级父节点的活动状态。 - Ketan_Hirapara
$(function() { $("#bank").addClass('active'); $("#bank").parent().parent().find('.dcjq-parent').addClass('active'); }); - Ketan_Hirapara
0

不确定我是否理解错了，但是在你的标记中没有找到 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');

});

jsFiddle是一个在线的代码编辑器和调试工具。它可以帮助开发人员快速创建、测试和共享前端代码。在这个例子中，它给li元素添加了一个类，并且也给其中的a标签添加了一个类。 - Roger Walsh
我刚刚更新了jsfiddle，加了一点css，也许这样对你来说更清楚了。我不确定这是否是你需要的解决方案，但是在li点击时，它会给li添加active和.dcjq-parent类，然后还会给a标签添加active类。 - Roger Walsh
好的，我不明白了，抱歉。祝你好运！ - Roger Walsh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接