jquery - 如何将 Bootstrap 中的下拉代码转换为悬停代码？

Question

<ul id="multicol-menu" class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="row" style="width: 400px;">
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">A</a></li>
                        <li><a href="#">B</a></li>
                        <li><a href="#">C</a></li>
                    </ul>
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">a</a></li>
                        <li><a href="#">b</a></li>
                        <li><a href="#">c</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

上面的代码非常适合下拉菜单，但是如何使上面的代码悬停。当有人悬停他/她的鼠标时，将显示 3 列，目前它非常适合下拉菜单。

Answer 1

当您单击下拉按钮时，类“open”将应用于与触发此 css 的“dropdown”相同的元素

.open > .dropdown-menu {
    display: block;
}

所以最简单的解决方案是像这样在你的 css 中利用它

.dropdown > .dropdown-menu {
    display: block;
}