javascript - 如何将子 uls 的所有 li 添加并切换到特定单击 li 下面的父 ul

Question

致力于将嵌套菜单转换为移动菜单...我需要在点击时将每个下拉列表添加到父级下方并切换它们。

这是当前菜单标记，悬停时下拉菜单可见:

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