Question

我试图在单击子元素链接时捕获事件，并向其添加名为“highlightchild”的类。此外，我想检查是否存在任何子元素链接，如果没有子元素退出，即“第三级”突出显示“highlightparent”父级。我怎么能用jquery做到这一点？

$(document).ready(function() {
  $('.menu ul').hide();
  $('.menu .arrowUp').click(function() {
  $('.menu ul').hide();
  $(this).find(".third-level").toggle();
  });
});

HTML 的

<ul class="menu">
<li class="arrowUp"><a href="#">link1</a>
 <ul class="third-level" >             
 <!-- third level non-active -->
  <li class="arrowUp"><a href="/somelink/">Some Link</a></li>
 </ul>
</li>
<li class="arrowUp"><a href="#">link2</a>
 <ul class="third-level" >             
 <!-- third level non-active -->
  <li class="arrowUp"><a href="/links2/">some Links 2</a></li>
 </ul>
 </li>
<li class="arrowUp"><a href="#">link3</a>
 <ul class="third-level" >
 <!-- third level non-active -->
     <li class="arrowUp"><a href="/Agri/">Agricultural</a></li>
     <!-- third level non-active -->
      <li class="arrowUp"><a href="/sugar/">Sugar</a></li>
    <!-- third level non-active -->
      <li class="arrowUp"><a href="/bbc/">Coffee</a></li>
      <!-- third level non-active -->
      <li class="arrowUp"><a href="/cnn/">Energy</a></li>
      <!-- third level non-active -->
      <li class="arrowUp"><a href="funstuff">Fun stuff</a></li>
   </ul>
</li>
<li class="arrowUp"><a href="#">link4</a></li>
<li class="arrowUp"><a href="#">link5</a></li>
<li class="arrowUp"><a href="#">link6</a></li>
</ul>

Answer 1

不确定你的第二部分是什么意思（可以改写和/或澄清？），但我会使用.delegate()：

$('ul.menu').delegate('a', 'click', function() {
    $('ul.menu .highlightchild').removeClass('.highlightchild');
    $(this).addClass('.highlightchild');
});

这只会将一个事件处理程序添加到菜单的根目录。

Answer 2

// add hightlightChild class to children anchor tags on click
$('.parent_link > a').click(function(){
  $(this).addClass('highlightChild');
  return false; // or not if you want to follow the link
});

// loop over each parent link and highlight it if no children links exist
$('.parent_link').each(function(){
  if ( $(this).children('a').size() > 0 ){
    $(this).addClass('highlightParent');
  }
});

Answer 3

怎么样：

$(".arrowUp > a").bind("click", function(event) {
    event.preventDefault();
    if ($(this).closest(".third-level").length > 0 ||
        $(this).siblings().length === 0) {
        $(this).addClass("highlight");
    }
});

包含课程third-level的家长的所有链接，或没有兄弟a的链接。

http://jsfiddle.net/andrewwhitaker/bMupR/

修改：没有注意到您想要不同的父/子高亮课程，以下是您将如何做到这一点：

$(".arrowUp > a").bind("click", function(event) {
    event.preventDefault();
    if ($(this).closest(".third-level").length > 0) {
        $(this).addClass("childhighlight");
    }
    else if ($(this).siblings().length === 0) {
        $(this).addClass("parenthighlight");
    }
});

http://jsfiddle.net/andrewwhitaker/bMupR/1/

如何捕获使用jquery点击的子链接？

3 个答案: