Кажется, я не могу работать, но я не понимаю, почему. Может кто-то быстро взглянуть и сказать мне, что я делаю неправильно?
Цель: я хочу, чтобы мой "sidebar-inner-list" скользил вниз, когда я нажимаю "sidebar-navigation> li", и я хочу, чтобы закрыть все открытые списки, когда я нажимаю закрытую. Мне также нужно иметь возможность закрыть тот, который я нажал, когда я снова нажму его.
HTML
<ul class="sidebar-navigation">
<li>
Overskrift
<ul class="sidebar-inner-list">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</li>
<li>
Overskrift 2
<ul class="sidebar-inner-list">
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
</ul>
</li>
</ul>
Jquery
var allPanels = $('.sidebar-inner-list > li').hide();
$('.sidebar-navigation > li').click(function () {
allPanels.slideUp();
$(this).children('.sidebar-inner-list').slideDown();
return false;
});
Надеюсь, кто-то может заметить ошибку.
я также сделал скрипку: http://jsfiddle.net/iBertel/nrFhu/6/
Вам нужно свернуть те же элементы, которые вы скрываете.
http://jsfiddle.net/isherwood/nrFhu/7/
$(this).find('.sidebar-inner-list').slideDown();
Должно быть
$(this).find('.sidebar-inner-list li').slideDown();
Чтобы решить проблему с обновлением, вам, вероятно, потребуется добавить еще один логический уровень:
http://jsfiddle.net/isherwood/nrFhu/8/
$('.sidebar-navigation > li').each(function () {
$(this).click(function () {
$('.sidebar-navigation > li').not(this).find('li').slideUp();
$(this).find('.sidebar-inner-list li').slideDown();
return false;
});
});
Попробуй это
$(document).ready(function(){
$('.sidebar-inner-list').children("li").slideUp(0);
$('.sidebar-navigation li').click(function () {
$('.sidebar-inner-list').children("li").slideUp();
$(this).children(".sidebar-inner-list").children("li").slideDown();
});
});