jQuery如何实现点击不同层级a标签时为指定父级foo元素切换class

实现步骤&代码 #

你原有代码存在两个问题：

• 选择器.foo > a无法匹配到目标第一层a标签：该a是.secondary的直接子元素，并非.foo的直接子元素
• 方法名拼写错误：jQuery的类操作方法是驼峰命名toggleClass，你写的toggleclass缺少大写C无法生效

按照需求可以直接区分两类a标签分别绑定事件即可，代码如下：

// 替换your-custom-class为你实际需要添加的自定义类名
// 点击第一层a（.secondary的直接子a）添加类
$('.secondary > a').click(function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  $(this).closest('.secondary').parent('.foo').addClass('your-custom-class');
});

// 点击内层.bar包裹的a标签移除类
$('.secondary .bar .foo a').click(function(e) {
  e.preventDefault();
  $(this).closest('.secondary').parent('.foo').removeClass('your-custom-class');
});

如果你的菜单是动态生成的，可以使用事件委托的写法，性能更优也能适配动态新增的元素：

$('.menu')
  // 绑定第一层a点击事件
  .on('click', '.secondary > a', function(e) {
    e.preventDefault();
    $(this).closest('.secondary').parent('.foo').addClass('your-custom-class');
  })
  // 绑定内层a点击事件
  .on('click', '.secondary .bar .foo a', function(e) {
    e.preventDefault();
    $(this).closest('.secondary').parent('.foo').removeClass('your-custom-class');
  });

如果需要实现点击第一层a的时候切换类状态（已有类就移除，没有就添加），把第一层事件里的addClass换成toggleClass即可。

内容的提问来源于stack exchange，提问作者May