单击使用jquery在li标签的子ul中的超链接标记时向正文添加类

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect. What I am trying to do is as given below: Script:

我想在单击链接时向body添加一个类。当链接在父级ul中时，这很容易完成，但我的问题是我想为父li的子ul中存在的链接执行此操作。每当我尝试这样做时它都没有效果。我想要做的是如下：脚本：

    <script>
      $(document).ready(function () {
        $("ul.treeview-menu").find("a.links").click(function () {
            $("body").addClass("sidebar-collapse");
         });
      });
   </script>

 <ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="any-link" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

Thank you in advance.

先谢谢你。

3 个解决方案

#1

Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding

试试on（'click'，...），可能是你的导航将在加载页面后动态生成，所以你必须使用委托事件绑定

  $(document).ready(function () {
    $(document).on('click','ul.treeview-menu a.links',function () {
        $("body").addClass("sidebar-collapse");
    });
  });



<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="abc" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

#2

you have two issues:

你有两个问题：

1- this line //}); it was commented and was preventing your code from working.

1-这一行//}）;它被评论并阻止您的代码工作。

2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.

2 - 当点击超链接时，它会刷新页面，因此您添加到之前的html中的任何课程都已被删除，这就是您希望能够看到任何更改的原因。

try this:

尝试这个：

 <script>
      $(document).ready(function () {
        $("ul.treeview-menu").find("a.links").click(function (e) {
        e.preventDefault()
            $("body").addClass("sidebar-collapse");
        });
      });
   </script>

 <ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="abc" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

#3

 $(document).ready(function () {
    $("ul.treeview-menu").find("a.links").click(function (e) {
    e.preventDefault()
        $("body").addClass("Enter your class name");
    });
  });

#1