Question

I am trying to create a nested sliding list with jQuery. slideToggle is working properly but i cannot find a way to slideUp previous <UL> selection. I would really appreciate any kind of help. Here's my code:

HTML:

<ul>
    <li>100
        <ul>
            <li>110
                <ul>
                    <li>111</li>
                    <li>112</li>
                    <li>113</li>
                </ul>
            </li>
            <li>120
                <ul>
                    <li>121</li>
                    <li>122</li>
                    <li>123</li>
                </ul>
            </li>
            <li>130
                <ul>
                    <li>131</li>
                    <li>132</li>
                    <li>133</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>200
        <ul>
            <li>210
                <ul>
                    <li>211</li>
                    <li>212</li>
                    <li>213</li>
                </ul>
            </li>
            <li>220
                <ul>
                    <li>221</li>
                    <li>222</li>
                    <li>223</li>
                </ul>
            </li>
            <li>230
                <ul>
                    <li>231</li>
                    <li>232</li>
                    <li>233</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>300
        <ul>
            <li>310
                <ul>
                    <li>311</li>
                    <li>312</li>
                    <li>313</li>
                </ul>
            </li>
            <li>320
                <ul>
                    <li>321</li>
                    <li>322</li>
                    <li>323</li>
                </ul>
            </li>
            <li>330
                <ul>
                    <li>331</li>
                    <li>332</li>
                    <li>333</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

jQuery:

$(document).ready(function() {
    var item = [0, 0, 0];
    $("li").click(function(e) {
        e.stopPropagation();
        var lvl = $(this).parents('ul').length;
        var idx = $(this).index() + 1;
        var prev = item;
        switch (lvl) {
            case 1: item = [idx, 0, 0]; break;
            case 2: item = [item[0], idx, 0]; break;
            case 3: item = [item[0], item[1], idx]; break;
        }
        console.log('prev:' + prev + ' - new:' + item);
        // $('.menu ul').eq(item[0]).find('ul').eq(item[1]).find('ul').eq(item[2]).slideUp();
        $(this).children("ul").slideToggle({ duration: 200, queue: false });
    });
});

This is my code on fiddle

Thank you in advance!

Was it helpful?

Solution

JUST ADD:

     $(this).siblings().find("ul").slideUp({ duration: 200});

before line:

   $(this).children("ul").slideToggle({ duration: 200, queue: false });

OTHER TIPS

Try

$(document).ready(function () {
    var $uls = $('ul ul');
    $("li").has('ul').click(function (e) {
        e.stopPropagation();
        $uls.not($(this).parents('ul')).slideUp({
            duration: 200,
            queue: false
        });
        $(this).children("ul").slideToggle({
            duration: 200,
            queue: false
        });
    });
});

Demo: Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top