单击内部标签时将类添加到li

Question

我想在单击标签时向li添加一个类，但是我正在使用jQuery addclass，但不确定如何将其添加到LI

<ul class="nav">
 <li class=""> <!---------add class to here---->
   <a href="default.asp">Home</a> <!-------- when this is clicked---->
   <ul>
       <li><a href="news.asp">link 1</a></li><!-------- but NOT when this is clicked----->
       <li><a href="news.asp">link 2</a></li>
       <li><a href="news.asp">link 3</a></li>
   <ul>
 </li>
 <li><a href="news.asp">News</a></li>
 <li><a href="contact.asp">Contact</a></li>
 <li><a href="about.asp">About</a></li>
</ul>

我希望这是有道理的

提前致谢

Answer 1

您可以通过添加以下点击功能来实现

$("ul.nav > li > a").click(function(){
     $(this).parent().addClass("your_class");
});

Answer 2

为了提高效率，您应该使用附加到.nav元素的单个委托事件处理程序：

如果您希望所有同级元素都删除该类，请使用not 。

例如

    $('.nav').on('click', 'li > a', function(){
          var $li = $(this).parent();
          $li.siblings().not($li.addClass('smclass')).removeClass('smclass');
    });

注意： .nav > li （强调> ）的答案仅适用于顶级链接。 您需要澄清是否要在所有链接上都具有相同的行为（此示例当前正在执行）。

如果您只希望它在顶级链接上起作用，那将是

    $('.nav').on('click', '> li > a', function(){
          var $li = $(this).parent();
          $li.siblings().not($li.addClass('smclass')).removeClass('smclass');
    });

Answer 3

您可以使用直接子选择器来定位所有直接子元素：

$('.nav > li > a').click(function(){
  $(this).parent().addClass('smclass')
});