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

Question

我正在将嵌套菜单转换为移动设备可用的菜单... 我需要在点击父级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 );
        });
    });
});

我真的很希望有人能指导我正确的方向。

- user2300867

---

请发布相关的CSS。 - Weafs.py

如果您可以制作jsfiddle，那会更好。 - Mohamed-Yousef

http://jsfiddle.net/3x1e245b/ - user2300867

@user2300867 这是否类似于您想要的内容？http://jsfiddle.net/3x1e245b/1/ - Mohamed-Yousef

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>

- Leo

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - user2300867