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>

jquery：

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

<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

我不确定我是否正确理解了您的代码，但如果它打开了，您可以删除其兄弟姐妹的崩溃。

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

引导下拉列表在悬停时无法正常工作

1 个答案: