Удаление класса из UL LI, но не UL LI UL LI с помощью jQuery

#jquery #accordion

#jquery #аккордеон

Вопрос:

Я модифицирую скрипт accordion, чтобы добавить класс active в ссылку, на которую нажимается, но для подпунктов у меня проблема.

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

 parent-item
parent-item (active)
   sub-item
   sub-item (active)
   sub-item
parent-item
parent-item
  

Вот часть скрипта, которая в настоящее время:

 $("#menu li a").removeClass("active");
$(this).addClass("active");
  

Спасибо, просто оставьте комментарий, если вам нужны разъяснения.

Редактировать:

Дочерние элементы технически не являются дочерними элементами одного и того же, поэтому .parent() не будут работать.

 <li>
    <a href="#">parent-item</a>
    <ul>
        <li><a href="#">sub-item</a>
    </ul>
</li>
  

Ответ №1:

Вы можете попробовать:

 $(this).parent().siblings().children('a').removeClass("active");
$(this).addClass("active");
  

Это приведет к удалению .active на элементах того же уровня

Ответ №2:

Что-то вроде:

 $("#menu > ul").removeClass("active");
$(this).parent("li").parent("ul").addClass("active");
  

Следует добавить активный класс к соответствующему родительскому элементу.

Ответ №3:

Возможно, этот пример поможет вам

 <ul id='menu'>
<li>
    <a>MElement1</a>
</li>
<li>
     <a>MElement2</a>
 </li>
</ul>
<ul id='menu1'>
<li>
    <a>Element1</a>
</li>
<li>
    <a>Element2</a>
</li>
</ul>
  

css

 .deneme{
    color:red;
}

.deneme1{
color:blue;
}
  

js

 $('#menu').addClass('deneme')
$('#menu1 li a').addClass('deneme1')

$('#menu').live('click',function(){
    $(this).toggleClass('deneme')
})
$('#menu1 li a').live('click',function(){
    $(this).toggleClass('deneme1')
})
  

и вы можете проверить отсюда http://jsfiddle.net/h7fvW /

Ответ №4:

Вы имеете в виду что-то вроде этого?

 $("#menu li a").removeClass("active");
$(this).addClass("active");
$(this).parent().addClass("active");
  

После удаления активного класса просто добавьте его обратно к выбранному элементу и его родительскому элементу.

РЕДАКТИРОВАТЬ: глядя на ваш HTML-фрагмент, вы должны иметь возможность вернуться назад, насколько вам нужно, а затем вернуться вниз. например

 $("#menu li a").removeClass("active");
$(this).addClass("active");
$(this).parent().parent().children("a").addClass("active");
  

Комментарии:

1. Это сработало бы, но, к сожалению, они не являются прямыми дочерними элементами. Я добавил пример HTML в исходный вопрос.