当鼠标悬停在另一个菜单项上时，Bootstrap 3删除活动类

Question

我有一个侧面下拉菜单，其中包含三个带子菜单项的链接。当我在其中一个子页面上时，我将'hover'类添加到父ul，使其保持打开状态。问题是，当我将鼠标悬停在另一个菜单链接上时，该子菜单仍然保持打开状态，最终阻止其他子菜单。当我将鼠标悬停在另一个菜单项上时，如何将悬停类移除到当前链接，如果我将其悬停在该菜单项之外又如何添加它？

这是我试图无用的代码

$(function(){
$(".dropdown-submenu.hover").toggleClass("active",true);
});

$(function(){
$(".dropdown-submenu").on("hover",function(e) {
if($(e.currentTarget).hasClass("active"))
$(e.currentTarget).toggleClass("active",false);
else 
$(e.currentTarget).toggleClass("active",true);
e.preventDefault(); 
return false;
});
$(".dropdown-submenu").on("hide.bs.dropdown", doNothing);

$(".dropdown-submenu").on("show.bs.dropdown", doNothing);

function doNothing() {
e.preventDefault(); 
return false;
}
});

这是html

    <div class="hidden-xs dropdown  col-sm-2 " id="sidebar" role="navigation">


            <button id="mainnav" class="btn-block mainmenu mainnav dropdown-toggle" data-toggle="dropdown" data-autohide="false">Menu</button>
                <ul id="mainsubnav" class="nav dropdown-menu mainsubnav" role="menu" aria-labelledby="dropdownMenu">
                    <li class="dropdown-submenu"><a href="Main Link 1">Has Submenu 1</a>

                        <ul class="dropdown-menu">
                                <li><a href="link1.php">Sublink 1</a></li>
                            <li><a href="link2.php">Sublink 1</a></li>
                            <li><a href="link3.php">Sublink 1</a></li>
                        </ul>

                    </li>
                    <li class="dropdown-submenu"><a href="Link 1">Has Submenu 2</a>

                        <ul class="dropdown-menu">
                                <li><a class="active" href="link1.php">Sublink 2</a></li>
                            <li><a href="link2.php">Sublink 2</a></li>
                            <li><a href="link3.php">Sublink 2</a></li>
                        </ul>

                    </li>
                    <li class="dropdown-submenu"><a href="Link 1">Has Submenu 3</a>

                        <ul class="dropdown-menu">
                                <li><a href="link1.php">Sublink 3</a></li>
                            <li><a href="link2.php">Sublink 3</a></li>
                            <li><a href="link3.php">Sublink 3</a></li>
                        </ul>

                    </li>
                    <li><a href="link">Link</a></li>
                    <li><a href="link">Link</a></li>
                    <li><a href="link">Link</a></li>
                    <li><a href="link">Link</a></li>

                </ul>




    </div><!--/#sidebar-->

</div>

这是添加悬停类

的代码

$('ul.dropdown-menu > li > a.active:first').closest('li.dropdown-submenu').addClass('hover');
$('ul.dropdown-menu > li > a.active:first').closest('li.dropdown-    submenu').children('a').addClass('active');

这是示例

http://www.bootply.com/hXsG8vzeDj