Как сделать родительский класс li, даже если вы нажмете кнопку li li?

Question

$("li a").filter(function() { 
    return this.href == location.href.replace(/#.*/, ""); 
}).parent().addClass("selected"); 

Привет, У меня есть меню с одним подменю уровня, и я использую приведенный выше код, чтобы добавить класс к текущей ссылке, которую я посетил. Результат таков:

<ul> 
    <li class="selected"><a href="link1.php">Link1</a> 
     <ul> 
      <li><a href="link1.php?id=aaa">SubLink1</a></li> 
      <li><a href="link1.php?id=bbb">SubLink2</a></li> 
     </ul> 
    </li> 
    <li><a href="link2.php">Link2</a> 
     <ul> 
      <li><a href="link2.php?id=aaa">SubLink1</a></li> 
      <li><a href="link2.php?id=bbb">SubLink2</a></li> 
     </ul> 
    </li> 
</ul> 

Однако, если я нажму любую из ссылки подменю, то «выбран» класс пошел и добавляется к ссылке подменю я нажал.

Есть ли способ сделать «выбранный» класс на родительском ли, даже если я нажму ссылку подменю?

Пожалуйста, помогите. Заранее спасибо.

Обновление: ни один из данных ответов не работает до сих пор, но я пытаюсь понять это на основе данных ответов. Но похоже, что я собираюсь отказаться :(

Answer 1

Кажется, работает отлично. Если убрать фильтрацию и просто использовать $(this) в клик-обработчик для a -элементов он должен работать.

$('a').on('click',function() { 
    $(this).parent().addClass("selected"); 
}); 

См http://jsfiddle.net/Lovkawcz/

Answer 2

$('a').on('click',function() { 
$(this).parent('li').addClass("selected"); 
}); 

Answer 3

попробовать добавить класс к вашим li элементы, которые вы хотите добавить изменения selected класса и затем селектор jQuery в вашем скрипте.

<script> 

$("li.first-level-menu a").filter(function() { 
    return this.href == location.href.replace(/#.*/, ""); 
}).parent().addClass("selected"); 

</script> 
<ul> 
    <li class="first-level-menu selected"><a href="#">Link1</a> 
     <ul> 
      <li><a href="#">SubLink1</a></li> 
      <li><a href="#">SubLink2</a></li> 
     </ul> 
    </li> 
</ul> 

EDIT

В любом случае вы должны иметь что-то, что позволяет распознавать элементы, которые вы хотите, так что вы можете создать класс анс использовать его в качестве маркера для вашей цели или вы должны использовать структуру HTML, как уже упоминалось.

Другой, и, возможно, наконец, способ сделать это:

<script> 

$("ul.main-menu > li a").filter(function() { 
    return this.href == location.href.replace(/#.*/, ""); 
}).parent().addClass("selected"); 

</script> 
<ul class="main-menu"> 
    <li class="selected"><a href="#">Link1</a> 
     <ul> 
      <li><a href="#">SubLink1</a></li> 
      <li><a href="#">SubLink2</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 4

Ответ Marco Mercury будет работать нормально, но если вы хотите сделать это в JQuery без изменения HTML, вы можете попробовать с этим фрагментом :

$('li a').not('ul > li > ul > li a').on('click',function() { 
    $('.selected').removeClass('selected'); 
    $(this).parent().addClass("selected"); 
}); 

будет соответствовать li a и Exlude в Чайлдс с not.

JsFiddle