单击子菜单时阻止菜单滚动

Question

我这里有一个垂直菜单，它又有主要和次要子菜单。单击主要或辅助子菜单时，将关闭整个菜单。我希望子菜单在点击时保持打开状态。

例如：垂直菜单＆gt;首先是子菜单＆gt;第二个子菜单（单击），页面打开，菜单保持打开状态。

$(function () {
    $('.showFirst').click(function () {
        $(this).children('ul').slideToggle();
        $('.showFirst').not(this).find('ul').slideUp();
        e.stopPropagation();
    });
    $('.showSecond').click(function () {
        $(this).children('ul').slideToggle("slow");
        return false;
    });
    
    $('ul li ul').click(function () {
        $('ul li ul li ul').slideUp();
    });
    $('ul li ul li ul').click(function (e) {
        $("ul li ul li ul").slideUp();
        $("ul li ul").slideUp();
        e.stopPropagation();
    });
    
});

ul {
    list-style: none;
    cursor: pointer;
}
a {
    color: black;
    line-height: 25px;
    text-decoration: none;
}
a:hover {
    color: #aaa;
    text-decoration: none;
}
span.sb-caret {
    width: 0px;
    height: 0px;
    display: inline-block;
    margin: 0px 5px;
    border: 5px solid transparent;
}
span.sb-caret {
    /* Caret Down */
    border-top: 5px solid;
    border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
    /* Caret Up */
    border-top: 0px solid transparent;
    border-bottom: 5px solid;
}
ul li > ul {
    display: none;
    /* 	border:1px solid black; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
    <li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
        <ul>
            <li><a href="#">Second</a>
            </li>
            <li><a href="#">Second</a>
            </li>
            <li><a href="#">Second</a>
            </li>
        </ul>
    </li>
    <li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
        <ul>
            <li class="showSecond"><a href="#">Second<span class="sb-caret"></span></a>
                <ul>
                    <li><a href="#">third</a>
                    </li>
                    <li><a href="#">third</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Second</a>
            </li>
            <li><a href="#">Second</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

我不确定你是如何能够跟踪所有这些ul li ul...字符串的......但不要这样做。如果您的DOM稍有变化，或者您输错了某些内容，那么您可能会轻易犯错误。在标记中添加类，以便更容易遍历和引用元素。在这种情况下，<ul>每个级别的不同类会使事情变得更容易。

然后，您只需要选择崩溃的菜单和时间。您会注意到，唯一真正的变化是我用这些替换了您的ul li ul...点击处理程序：

$('.tier-2').click(function (e) {
    $('.tier-3').slideUp();
    e.stopPropagation();
});

该代码确保无论何时单击二级列表，所有三级列表都会崩溃。

$('.tier-3').click(function (e) {
    $('.tier-2, .tier-3')
        .not(this)
        .not($(this).closest('.tier-2'))
        .slideUp();
    e.stopPropagation();
});

此片段确保如果单击三级列表，则除此之外所有其他三级列表都会崩溃，并且所有二级列表将崩溃，除了此列表的父级。

请参阅下面的完整示例。

＆＃13;

＆＃13;

$(function () {
    $('.showFirst').click(function () {
        $(this).children('ul').slideToggle();
        $('.showFirst').not(this).find('ul').slideUp();
        e.stopPropagation();
    });
    $('.showSecond').click(function () {
        $(this).children('ul').slideToggle("slow");
        return false;
    });
    
    $('.tier-2').click(function (e) {
        $('.tier-3').slideUp();
        e.stopPropagation();
    });
    $('.tier-3').click(function (e) {
        $('.tier-2, .tier-3')
            .not(this)
            .not($(this).closest('.tier-2'))
            .slideUp();
        e.stopPropagation();
    });
    
});

＆＃13;

ul {
    list-style: none;
    cursor: pointer;
}
a {
    color: black;
    line-height: 25px;
    text-decoration: none;
}
a:hover {
    color: #aaa;
    text-decoration: none;
}
span.sb-caret {
    width: 0px;
    height: 0px;
    display: inline-block;
    margin: 0px 5px;
    border: 5px solid transparent;
}
span.sb-caret {
    /* Caret Down */
    border-top: 5px solid;
    border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
    /* Caret Up */
    border-top: 0px solid transparent;
    border-bottom: 5px solid;
}
ul li > ul {
    display: none;
    /* 	border:1px solid black; */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
    <li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
        <ul class="tier-2">
            <li><a href="#">Second</a>
            </li>
            <li><a href="#">Second</a>
            </li>
            <li><a href="#">Second</a>
            </li>
        </ul>
    </li>
    <li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
        <ul class="tier-2">
            <li class="showSecond"><a href="#">Second<span class="sb-caret"></span></a>
                <ul class="tier-3">
                    <li><a href="#">third</a>
                    </li>
                    <li><a href="#">third</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Second</a>
            </li>
            <li><a href="#">Second</a>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;