引导下拉菜单在悬停时无法正常工作

Posted 2023-03-06

【中文标题】引导下拉菜单在悬停时无法正常工作

【英文标题】：bootstrap dropdown not working properly on hover

【发布时间】：2014-11-21 01:00:07

【问题描述】：

我使用折叠类制作了一个下拉菜单，其中我在上滑和下滑时添加了一个“折叠”类。扩展后，它添加了“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 代码：

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

【问题讨论】：

什么时候调用你的javascript方法'ab'？

@VaibhavKatole 在正文加载时。

【参考方案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？