#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 в исходный вопрос.