Question

在侧边栏菜单列表项目方面很好，但在孩子们的帮助下，儿童项目的孩子不会滑动。

    <ul class="side">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul class="inner">
                <li><a href="#">Item 2: 1</a></li>
                <li><a href="#">Item 2: 2</a></li>
                    <ul class="doubleinner">
                        <li><a href="#">Item 2: 2: 1</a></li>
                        <li><a href="#">Item 2: 2: 2</a></li>
                    </ul>
                <li><a href="#">Item 2: 3</a></li>
                <li><a href="#">Item 2: 4</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a>
            <ul class="inner">
                <li><a href="#">Item 3: 1</a></li>
                <li><a href="#">Item 3: 2</a></li>
                <li><a href="#">Item 3: 3</a></li>
            </ul>
        </li>
    </ul>

我的jQuery看起来像：

$(document).ready(function() {

$('.inner li').hide();

$('.side > li').each(function () {
    $(this).click(function () {
        $('.side > li').not(this).find('li').slideUp();
        $(this).find('.inner li').slideDown();
        return false;
    });
});
});

我想在课程“doubleinner”下滑动。怎么做？我需要在“第2：2”项下上下滑动。

此处：jsfiddle.net

这是我正在编写的实验和教育剧本，我还不是专业人士。：）

非常感谢。

Answer 1

使用> child combinator，您只能在<li>元素直接在 .side内绑定点击事件，因此{{1 } <li>内部未触及此定义。你永远不会在代码中显示.Doubleinner。从代码中不清楚.doubleinner是否应该是“第二级”中唯一的一个，如果是这种情况，你可以找到一个不会破坏你的代码的解决方案（只是添加一些东西）：{{3} }

Answer 2

您的嵌套ul li是错误的。内部阶级的第二个li应该在doubleinner ul之后关闭。

请尝试以下js。

$（document）.ready（function（）{

$('ul ul').hide();

$('li a').click(function ()
{
    if(!$(this).parent('li').hasClass('open'))
    {
        $(this).parent('li').parent('ul').find('li.open').find('ul').slideUp();
        $(this).parent('li').parent('ul').find('li').removeClass('open');
        $(this).parent('li').addClass('open');
        $(this).parent('li.open').children('ul').slideDown();
    }
});

和html是

<ul class="side">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a>
                <ul class="inner">
                    <li><a href="#">Item 2: 1</a></li>
                    <li><a href="#">Item 2: 2</a>
                        <ul class="doubleinner">
                            <li><a href="#">Item 2: 2: 1</a></li>
                            <li><a href="#">Item 2: 2: 2</a></li>
                        </ul></li>
                    <li><a href="#">Item 2: 3</a></li>
                    <li><a href="#">Item 2: 4</a></li>
                </ul>
            </li>
            <li><a href="#">Item 3</a>
                <ul class="inner">
                    <li><a href="#">Item 3: 1</a></li>
                    <li><a href="#">Item 3: 2</a></li>
                    <li><a href="#">Item 3: 3</a></li>
                </ul>
            </li>
        </ul>

Answer 3

您应该将第二个列表项放在第一个列表项li中，并区分是否单击了内部项或if的父项。 JSFiddle如下：

$(document).ready(function() {

$('.inner li').hide();

$('li').each(function () {
    $(this).click(function () {
        $('.doubleinner > li').not(this).find('.doubleinner li').slideUp();
        if($(this).parent().attr('class') == 'side')
        $(this).find('ul > li').not('.doubleinner > li').slideDown();
        else
        $(this).find('.doubleinner li').slideDown();                
        return false;
    });
});

});

    <ul class="side">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul class="inner">
                <li><a href="#">Item 2: 1</a></li>
                <li><a href="#">Item 2: 2</a>
                    <ul class="doubleinner">
                        <li><a href="#">Item 2: 2: 1</a></li>
                        <li><a href="#">Item 2: 2: 2</a></li>
                    </ul>
                    </li>
                <li><a href="#">Item 2: 3</a>
                    <ul class="doubleinner">
                        <li><a href="#">Item 2: 3: 1</a></li>
                        <li><a href="#">Item 2: 3: 2</a></li>
                    </ul>
                    </li>
                <li><a href="#">Item 2: 4</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a>
            <ul class="inner">
                <li><a href="#">Item 3: 1</a></li>
                <li><a href="#">Item 3: 2</a></li>
                <li><a href="#">Item 3: 3</a></li>
            </ul>
        </li>
    </ul>

JSFiddle

使用jQuery使用列表项的侧边栏幻灯片导航

3 个答案: