javascript - jQuery下拉菜单三个级别

我有三层菜单：
HTML格式：

<ul class="main-menu">
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Blog</a>
        <ul class="level2">
            <li>
                <a href="#">item1</a>
                <ul class="level3">
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                </ul>
            </li>
            <li><a href="#">item2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

.main-menu li a {
    color: #000;
}
.level3,
.level2 {
    display: none;
}
.main-menu li.active .level2 {
    display: block;
}

.level2 li.active .level3 {
    display: block;
}

脚本：

$('.main-menu > li').click(function () {
    $(this).toggleClass('active');
});

$('.level2 > li').click(function () {
    $(this).toggleClass('active');
});

问题是，当我单击第二个级别的元素时，第三个级别的列表不会打开。怎么解决？如何重构代码以避免重复？
DEMO

最佳答案

使用event.stopPropagation()tp防止从子元素到父元素的事件bubling。
DEMO

$('.main-menu > li').click(function () {
    $(this).toggleClass('active');
    $('.level2 > li').removeClass('active');
});

$('.level2 > li').click(function (event) {
    $(this).toggleClass('active');
    event.stopPropagation();
});