Domanda

I cant seem to get this working, but i dont understand why. Can someone take a quick look and tell me what i am doing wrong?

Goal: I want my "sidebar-inner-list" to slide down when i click the "sidebar-navigation > li" and i want to be able to close all open lists when i push a closed one. I also need to be able to close the one i clicked when i click it again.

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;
});

Hope someone can spot the error.

i also made a fiddle: http://jsfiddle.net/iBertel/nrFhu/6/

È stato utile?

Soluzione

You need to slideDown the same elements you hide.

http://jsfiddle.net/isherwood/nrFhu/7/

$(this).find('.sidebar-inner-list').slideDown();

Should be

$(this).find('.sidebar-inner-list li').slideDown();

To solve the up-down issue, you'll probably need to add one more logic layer:

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;
    });
});

Altri suggerimenti

Try this

$(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();
    });
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top