Как захватить дочерние ссылки, на которые нажали с помощью jquery? - PullRequest
Новая
       7

Как захватить дочерние ссылки, на которые нажали с помощью jquery?

0 голосов
/ 10 января 2011

Я пытаюсь зафиксировать событие, когда нажата ссылка на дочерний элемент, и добавить к нему класс с именем "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>

Ответы [ 3 ]

2 голосов
/ 10 января 2011

Не уверен, что вы имели в виду со своей второй частью (можно перефразировать и / или уточнить?), Но я бы использовал .delegate(): 

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

Это добавляет только1007 * один обработчик событий в корне меню.

0 голосов
/ 10 января 2011

Как насчет: 

$(".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 s.

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/

0 голосов
/ 10 января 2011 
// 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');
  }
});
...