2013-06-30 3 views
0

Итак, я пытаюсь настроить свое меню аккордеона так, что когда вы нажмете на одно меню и откроете его, затем нажмите на другое, предыдущее меню должно закрыть - но, кажется, автоматически открывается закройте меню, когда вы нажмете на него.jQuery Аккордеон Дети не скрываются

Может кто-нибудь проверить мой код, чтобы увидеть, что мне не хватает? Я пробовал использовать функцию siblings, но она вообще не работала бы, и функция find вызывает вышеупомянутую проблему.

HTML

дизайн серии

<div class="sideContent"> 
    <ul> 
     <li><a href="http://www.nerosdecoshoppe.com/collections/275070-assorted-designs">Assorted Designs</a></li> 
     <li><a href= "http://www.nerosdecoshoppe.com/collections/202951-kiss-me-goodnight">Kiss Me Goodnight</a></li> 
     <li><a href= "http://www.nerosdecoshoppe.com/collections/202954-natures-phone-call">Into the Wild</a></li> 
     <li><a href= "http://www.nerosdecoshoppe.com/collections/202949-alice-n-stripes">Alice n Stripes</a></li> 
     <li><a href= "http://www.nerosdecoshoppe.com/collections/202950-magical-kingdom">Magical Kingdom</a></li> 
    </ul> 
    </div> 
</div> 

<div> 
    <a href="%20#" class="sideHeader">decoden cases</a> 

    <div class="sideContent"> 
    <ul> 
     <li><a href="http://www.nerosdecoshoppe.com/collections/202952-whip-cream">WhipCream</a></li> 
     <li><a href="http://www.nerosdecoshoppe.com/collections/202953-rhinestone-pearls">Rhinestones/Pearls</a></li> 
    </ul> 
    </div> 
</div> 

JQuery:

$(document).ready(function() { 
    $('.sideContent').hide(); 
    $('.sideHeader').click(function() { 
     event.preventDefault(); 
     $(this).next().slideToggle('fast') 
     //.parent().parent().find('.sideContent:visible').slideUp('fast'); 
     .parent().parent().siblings.find('.sideContent:visible').slideUp('fast'); 
    }); 
}); 

Вот jFiddle link, чтобы показать это я п действие

ответ

0

Вы могли бы сделать что-то вроде этого

$(document).ready(function() { 
    $('.sideContent').hide(); 
    $('.sideHeader').click(function() { 
     event.preventDefault(); 
     $('.sideContent').slideUp('fast'); 
     $(this).next().slideToggle('fast'); 

    }); 
}); 

DEMO

EDIT: Новая версия для покрытия сценарий описывается @nevermind

$(document).ready(function() { 
    $('.sideContent').hide(); 
    $('.sideHeader').click(function() { 
     event.preventDefault(); 
     var $slideContent = $(this).next(); 
     var slideDown = $slideContent.is(":not(:visible)"); 
     $('.sideContent').slideUp('fast'); 

     if (slideDown) 
      $slideContent.slideDown('fast'); 
    }); 
}); 

DEMO

+0

Это нормально работает, но если пользователь нажимает два раза на один элемент - подменю не может быть закрыто ... – sinisake

+0

@nevermind: достаточно справедливо. Добавлен ответ, чтобы охватить этот сценарий. –

0
$(document).ready(function() { 
    $('.sideContent').hide(); 
    $('.sideHeader').click(function (event) { 
     event.preventDefault(); 
     // $(this).next() 
    $(this).next().slideToggle('fast'); 
    $('#sidenav').find('a').not(this).next().slideUp('fast'); 



    }); 
}); 

Это будет работать. jsfiddle очень медленный в настоящее время ... http://jsfiddle.net/sinisake/76MbN/3/

Смежные вопросы