如何在特定单击的 li 下方添加和切换所有子 ul 的 li 到父 ul

Question

正在将嵌套菜单转换为 mobil... 我需要在单击时在父 li 正下方添加下拉菜单的每个 li 并切换它们。

这是当前菜单标记，悬停时可以看到下拉菜单：

<ul class="navigation-menu">

    <li class="white-hover"><a ceid="rd-menu" class="nav-main-links" href="#">Category</a>
        <div class="drop">
            <div class="drop-holder">
                <div class="left-side-menu dividerLine">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
                <div class="right-side-menu">
                    <ul>
                <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>....</li>
    <li>....</li>
    <li>....</li>
</ul>

不太清楚如何解决这个问题。我相信我需要详细说明类似的内容：

$(document).ready(function() 
 {
    $('ul.navigation-menu li').click(function(e) 
    { 
        $(this).find('li').each(function(){
            $(this).after( each child li );
        });
    });
});

如果有人能指出我正确的方向，我将不胜感激。

Answer 1

只需在点击事件上切换样式（最初是在悬停时）：

CSS：

/* before */
ul.navigation-menu li:hover {...}
ul.navigation-menu li:hover div.drop {...}

/* after */
ul.navigation-menu li.active {...}
ul.navigation-menu li.active div.drop {...}

JS：

$(document).ready(function() {
    $('.white-hover').click(function(e) {
        $(this).toggleClass('active');
    });
});

---

这是一个稍有改进的演示：

$(document).ready(function() {
    $('.white-hover').click(function(e) {
        if (!$(this).hasClass('active')) {
            $('.active').removeClass('active');
        }
        $(this).toggleClass('active');
    });
});

ul.navigation-menu li {
    display: block;
    position: relative;
}

ul.navigation-menu li.active {
    display: block;
    background-color: #09b5c9;
}

ul.navigation-menu li div.drop {
    display: none;
} 

ul.navigation-menu li.active div.drop {
    display: block;
    position: absolute;
    width: 387px;
} 

.drop {
    background-color: #fff;
    width: 387px;
    padding-left: 23px;
    padding-right: 25px;
    left: 0px;
    z-index: 9999;
    border-top:4px solid #09b5c9;
    top:46px;
    padding-bottom: 25px;
    box-shadow: 1px 3px 4px 0 #888 !important;
    display: block;
    position: absolute;
    padding-top: 15px;
}

.drop-holder {
    width:387px;
    float: left;
}

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<ul class="navigation-menu">
    <li class="white-hover">
        <a ceid="rd-menu" class="nav-main-links" href="#">Category</a>
        <div class="drop">
            <div class="drop-holder">
                <div class="left-side-menu dividerLine">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
                <div class="right-side-menu">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="white-hover">
        <a ceid="rd-menu" class="nav-main-links" href="#">Category</a>
        <div class="drop">
            <div class="drop-holder">
                <div class="left-side-menu dividerLine">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
                <div class="right-side-menu">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="white-hover">
        <a ceid="rd-menu" class="nav-main-links" href="#">Category</a>
        <div class="drop">
            <div class="drop-holder">
                <div class="left-side-menu dividerLine">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
                <div class="right-side-menu">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="white-hover">
        <a ceid="rd-menu" class="nav-main-links" href="#">Category</a>
        <div class="drop">
            <div class="drop-holder">
                <div class="left-side-menu dividerLine">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
                <div class="right-side-menu">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>