javascript - 单击子菜单时防止菜单卷起

Question

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

例如:垂直菜单 > 子菜单第一 > 子菜单第二(点击)，页面打开，菜单保持打开状态。

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

此片段确保如果单击一个三级列表，则除此列表外的所有其他三级列表都会折叠，并且除此列表的父列表外的所有二级列表都会折叠。

请参阅下面的完整示例。

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

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 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>