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

Question

我想在单击链接时向正文添加一个类。 当链接位于父 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>

先感谢您。

Answer 1

尝试使用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>

Answer 2

你有两个问题：

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

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

尝试这个：

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

Answer 3

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