logo标签列表

如何在打开的手风琴中滚动到另一个手风琴？

javascripttwitter-bootstrap
3
我有以下结构（缩减内容后可能复制/粘贴错误）。它基本上是折叠元素内的折叠元素。
我还有以下代码，用于在单击后滚动到打开的手风琴元素：
$(".accordion").on("shown.bs.collapse", function() {
    var myEl = $(this).find('.collapse.in').prev('.panel-heading');
    $('html, body').animate({
        scrollTop: $(myEl).offset().top - 6
    }, 500);
});

这段代码可以正常运行 - 只要手风琴元素没有子手风琴。一旦打开了父手风琴，然后再打开子手风琴，它会滚动到子元素，但然后会滚动回父元素。
我需要修改JavaScript片段中的什么才能使其正常工作？ 我相当确定当前问题是由于使用.prev引起的。
<div class="panel-group accordion" id="application-migration" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="migrate-hybrid">
            <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#hybrid-migration" href="#collapseMigrateHybrid" aria-expanded="false" aria-controls="collapseMigrateHybrid"> ... </a>
                    </h4>
        </div>

        <div id="collapseMigrateHybrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="migrate-hybrid">
            ...
            ...
            ...
            <div class="panel-group accordion" id="setupCordova" role="tablist" aria-multiselectable="false">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="setupCordova">
                        <h4 class="panel-title">
                            <a class="preventScroll" role="button" data-toggle="collapse" data-parent="#setupCordova" data-target="#collapseCordova" aria-expanded="false" aria-controls="collapseCordova"> ... </a>
                        </h4>
                    </div>

                    <div id="collapseCordova" class="panel-collapse collapse" role="tabpanel" aria-labelledby="setupCordova">
                        <div class="panel-body">
                            ...
                            ...
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1个回答
2

很遗憾，当您打开子手风琴时，shown.bs.collapse事件将为两个手风琴触发。

更新：您可以通过event.stopPropagation()避免第二个事件的发生。

https://jsfiddle.net/glebkema/t1wqbxwh/

$(".accordion").on("shown.bs.collapse", function(e) {
    var myEl = $(this).find('.collapse.in').prev('.panel-heading');
    $('html, body').animate({
        scrollTop: $(myEl).offset().top - 6
    }, 500);
    e.stopPropagation();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<p>...</p>
<p>...</p>
<p>...</p>

<div class="panel-group accordion" id="application-migration" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="migrate-hybrid">
            <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#hybrid-migration" href="#collapseMigrateHybrid" aria-expanded="false" aria-controls="collapseMigrateHybrid"> ... </a>
                    </h4>
        </div>

        <div id="collapseMigrateHybrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="migrate-hybrid">
            <p>...</p>
            <p>...</p>
            <p>...</p>
            <div class="panel-group accordion" id="setupCordova" role="tablist" aria-multiselectable="false">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="setupCordova">
                        <h4 class="panel-title">
                            <a class="preventScroll" role="button" data-toggle="collapse" data-parent="#setupCordova" data-target="#collapseCordova" aria-expanded="false" aria-controls="collapseCordova"> ... </a>
                        </h4>
                    </div>

                    <div id="collapseCordova" class="panel-collapse collapse" role="tabpanel" aria-labelledby="setupCordova">
                        <div class="panel-body">
                            <p>...</p>
                            <p>...</p>
                            <p>...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<p>...</p>
<p>...</p>
<p>...</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

你可以尝试使用a[aria-expanded="false"]' ).click

https://jsfiddle.net/glebkema/soc0rp3w/

$( 'a[aria-expanded="false"]' ).click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top - 6
    }, 500);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<p>...</p>
<p>...</p>
<p>...</p>

<div class="panel-group accordion" id="application-migration" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="migrate-hybrid">
            <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#hybrid-migration" href="#collapseMigrateHybrid" aria-expanded="false" aria-controls="collapseMigrateHybrid"> ... </a>
                    </h4>
        </div>

        <div id="collapseMigrateHybrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="migrate-hybrid">
            <p>...</p>
            <p>...</p>
            <p>...</p>
            <div class="panel-group accordion" id="setupCordova" role="tablist" aria-multiselectable="false">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="setupCordova">
                        <h4 class="panel-title">
                            <a class="preventScroll" role="button" data-toggle="collapse" data-parent="#setupCordova" data-target="#collapseCordova" aria-expanded="false" aria-controls="collapseCordova"> ... </a>
                        </h4>
                    </div>

                    <div id="collapseCordova" class="panel-collapse collapse" role="tabpanel" aria-labelledby="setupCordova">
                        <div class="panel-body">
                            <p>...</p>
                            <p>...</p>
                            <p>...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<p>...</p>
<p>...</p>
<p>...</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

几乎了解。现有代码还可以自动校正位置。比如说，如果您打开一个可折叠的内容并且其父元素移出屏幕，则它也会重新聚焦... 嗯。 - Idan Adar
我还注意到，“top-6”没有任何效果。 - Idan Adar
@IdanAdar 你可以测试 $(this).offset().top - 20 或者 $(this).parent().parent().offset().top - 6。效果可以看到。 - Gleb Kemarsky
@IdanAdar 不太确定我理解你所说的“聚焦”是什么意思。请再次解释一下你想要实现什么。jQuery 的 .focus() 能帮到你吗？ - Gleb Kemarsky
好的，问题已解决。ID 弄混了。 - Idan Adar
显示剩余5条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接