javascript - Bootstrap 下拉菜单在悬停时无法正常工作

Question

我使用折叠类制作了一个下拉列表，其中我在向上滑动和向下滑动时添加了一个“折叠”类。扩展后，它添加了类“in”。我已经使这个折叠属性在悬停时工作。现在它会产生一个问题，好像我在多个元素上更快地悬停，然后所有元素都会展开。但我只想一次打开一个元素以使其正常运行。这个问题基本上是在添加折叠类期间创建的，因为折叠类将有时间展开多个元素。这是我的代码:

<style>

    .icon_images {
        display: inline-block;
        height: 32px;
        margin-left: -9px;
        margin-top: 3px;
        width: 32px;
    }
    .admin_icon_cell {
        background-color: rgba(149, 149, 149, 0.6);
        background-position: right center;
        background-repeat: no-repeat;
        display: table-cell;
        height: 46px;
        text-align: center;
        vertical-align: middle;
        width: 68px;
    }
    .admin_menu_cell {
        background-color: rgb(205, 205, 205);
        color: #333333;
        display: table-cell;
        font-family: "Arial";
        font-size: 11px;
        font-weight: bold;
        padding-left: 10px;
        vertical-align: middle;
        width: 150px;
    }
    .menu_bg {
        border: 2px solid transparent;
        cursor: pointer;
        font-size: 94%;
        margin-left: 3px;
        margin-top: 15px;
    }
</style>

j查询:

<script>
    function ab() {
        $('.li').hover(function () {

            var child1 = $("div", this);
            var child2 = $("ul", this);
            // child1.removeClass('collapsed');
            child2.removeClass('collapse');
            var thisdiv = $(child1).attr("data-target");
            $(thisdiv).collapse("show");
            child2.addClass('in');
        }, function () {
            var child1 = $("div", this);
            var child2 = $("ul", this);
            //child1.addClass('collapsed');
            //child2.removeClass('in');
            var thisdiv = $(child1).attr("data-target");
            $(thisdiv).collapse('hide');
            //child2.addClass('collapse');
        });
    }
</script>

HTML代码:

<div id="wrapper" class="" style="height: 100%;">
<div style="background-color: #ffff00;width:255px;">
    <ul class="nav" style="height: 100%;">
        <li class="li">
            <div class="menu_bg" data-toggle="collapse" data-target="#radio2,.in">
                <div class="admin_icon_cell">
                    <div class="icon_images sprite2">

                    </div>
                </div>
                <div class="admin_menu_cell">hostel management</div>
            </div>
            <ul style="list-style: none;" class="collapse" id="radio2">
                <li><a href="#">Information &amp; Stats</a>
                </li>
                <li><a href="#">DJ Says</a>
                </li>
                <li><a href="#">Request Line</a>
                </li>
                <li><a href="#">Timetable</a>
                </li>
                <li><a href="#">Banned Songs</a>
                </li>
            </ul>
        </li>
        <li class="li">
            <div class="menu_bg" data-toggle="collapse" data-target="#radio3,.in">
                <div class="admin_icon_cell">
                    <div class="icon_images sprite3">

                    </div>
                </div>
                <div class="admin_menu_cell">User Management</div>
            </div>
            <ul style="list-style: none;" class="collapse" id="radio3">
                <li><a href="#">Information &amp; Stats</a>
                </li>
                <li><a href="#">DJ Says</a>
                </li>
                <li><a href="#">Request Line</a>
                </li>
                <li><a href="#">Timetable</a>
                </li>
                <li><a href="#">Banned Songs</a>
                </li>
            </ul>
        </li>
        <li class="li">
            <div class="menu_bg" data-toggle="collapse" data-target="#radio4,.in">
                <div class="admin_icon_cell">
                    <div class="icon_images">
                        <i class="fa fa-th-large fa-2x fa-spin" style=""></i>
                    </div>
                </div>
                <div class="admin_menu_cell">Library management</div>
            </div>
            <ul style="list-style: none;" class="collapse" id="radio4">
                <li><a href="#">Information &amp; Stats</a>
                </li>
                <li><a href="#">DJ Says</a>
                </li>
                <li><a href="#">Request Line</a>
                </li>
                <li><a href="#">Timetable</a>
                </li>
                <li><a href="#">Banned Songs</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

我不确定我是否正确理解您的代码，但如果它打开，您可以从它的 sibling 中删除折叠。

<script>
function ab() {
    $('.li').hover(function () {

        var child1 = $("div", this);
        var child2 = $("ul", this);
        // child1.removeClass('collapsed');
        child2.removeClass('collapse');
        var thisdiv = $(child1).attr("data-target");
        $(thisdiv).collapse("show");
        child2.addClass('in');

        // now close all open siblings
        $(thisdiv).siblings().collapse("hide");

    }, function () {
        var child1 = $("div", this);
        var child2 = $("ul", this);
        //child1.addClass('collapsed');
        //child2.removeClass('in');
        var thisdiv = $(child1).attr("data-target");
        $(thisdiv).collapse('hide');
        //child2.addClass('collapse');
    });
}
</script>

如果这不是您要搜索的内容，您能否提供一个 JSfiddle？