javascript - 在 Bootstrap Accordion 面板中预期之前触发 Mouseout

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>