Javascript 引导程序3将鼠标悬停在另一个菜单项上时删除活动类

我有一个侧面下拉菜单，有三个子菜单项链接。当我在其中一个子页面上时，我向父ul添加一个“hover”类，使其保持打开状态。问题是，当我将鼠标悬停在另一个菜单链接上时，该子菜单仍然保持打开状态，最终阻塞了另一个子菜单。当我将鼠标悬停在另一个菜单项上时，如何将鼠标悬停类删除到当前链接，如果我将鼠标悬停在该菜单项之外，如何将其再次添加

这是我尝试过的代码，但没有用

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

这是一个例子

---

尝试放置$（'.hover'）.removeClass（'hover'）；在分配新的之前。谢谢@dvidsilva。我更新了javascript，但现在无法返回到打开菜单的默认状态。我有点让它工作。关了，但不是真的。下面是更新的示例抱歉@JS我刚看到这个通知。这似乎在起作用，或者你想完成什么？

$('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');