Question

我正在尝试使用jQuery创建嵌套滑动列表。 slideToggle工作正常，但我找不到slideUp之前<UL>选择的方法。我真的很感激任何帮助。这是我的代码：

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

提前谢谢！

Answer 1

尝试

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

演示：Fiddle

Answer 2

只是添加：

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

行前的

：

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

jQuery slideUp UL以前的选择

2 个答案: