引导式手风琴面板中的鼠标输出触发器超出预期

Question

我正在尝试实现带有子菜单的菜单，但是我在子菜单上遇到有关mouseout事件的问题。

我要寻找的行为如下：当用户单击菜单项的第一级时，该父级的子菜单项将显示在另一个div中（由于设计要求，这一点很重要）。 如果用户再次单击该第一级菜单项，则子菜单关闭。 如果用户单击任何其他第一级菜单项，则打开相应的子菜单。

到目前为止，这对我的实施效果很好。

我面临的问题是菜单项的第二级。 我想实现一种解决方案，其中当用户离开子菜单而不单击任何项​​目时，子菜单面板关闭。 我正在尝试使用mouseout功能来实现这一点，并且几乎可以实现，但事实是，该功能会在用户单击任何第二级项目之前关闭面板。

我已经为此苦苦挣扎很长时间了，现在我完全被搞砸了，不知道在哪里看。 任何帮助，将不胜感激。 我先向您道歉，因为我混合了一些我不太了解的组件，我对Bootstrap，JQuery，javascript并不精明，并且对CSS的了解有限。

我已经在bootply中建立了一个演示： http : //www.bootply.com/cq60yI6wZ4#

再次感谢。

Answer 1

您需要检查引起mouseout事件触发的元素是否是.prova元素的子元素。 可以使用以下方法完成。

var e = event.toElement || event.relatedTarget;
if ($(e).parents('.prova').length) {
    return;
}

 $('.closeall').click(function () { $('.panel-collapse.in') .collapse('hide'); }); $('.prova').mouseout(function (event) { var e = event.toElement || event.relatedTarget; if ($(e).parents('.prova').length) { return; } $('.panel-collapse.in') .collapse('hide'); }); 

 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <div> <div> <!-- Inline script moved to the bottom of the page --> <div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist"> <div class="panel-heading" id="headingOne" role="tab"> <h4 class="panel-title"><a aria-controls="collapseOne" aria-expanded="false" class="closeall hoverExpand collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Moda Cosmética </a></h4> </div> <div class="panel-heading" id="headingTwo" role="tab"> <h4 class="panel-title"><a aria-controls="collapseTwo" aria-expanded="false" class="closeall hoverExpand collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Blog </a></h4> </div> <div class="panel-heading" id="headingThree" role="tab"> <h4 class="panel-title"><a aria-controls="collapseThree" aria-expanded="false" class="closeall hoverExpand collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">Tienda </a></h4> </div> </div> </div> </div> <div class="prova"> <div aria-labelledby="headingOne" class="panel-collapse marc collapse" id="collapseOne" role="tabpanel"> <div class="panel-body"> <ul> <li>Prendas Cosméticas</li> <li>Cómo Funciona</li> </ul> </div> </div> <div aria-labelledby="headingTwo" class="panel-collapse marc collapse" id="collapseTwo" role="tabpanel"> <div class="panel-body">Blog</div> </div> <div aria-labelledby="headingThree" class="panel-collapse marc collapse" id="collapseThree" role="tabpanel"> <div class="panel-body"> <ul> <li>Moda</li> <li>Jeans</li> <li>Interior</li> </ul> </div> </div> </div>