Question

使用Bootstrap 3，我正在尝试使用子导航锚链接（即index.php＃wnsh）来扩展指定的手风琴并将页面锚定到内容。我已经尝试过搜索示例但运气不佳，可能是因为我的手风琴结构与给定的BS3示例不同。这是我的HTML：

更新

对代码进行了一些更新，但它仍然没有打开哈希指定的手风琴。还有什么进一步的想法吗？

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

JS

var elementIdToScroll =  window.location.hash;

if(window.location.hash != ''){
  $("#accordion .in").removeClass("in");
  $(elementIdToScroll).addClass("in");
   $('html,body').animate({scrollTop: $(elementIdToScroll).offset().top},'slow');
}

提前致谢。任何帮助将不胜感激。

Answer 1

几分钟前我遇到了同样的问题。解决方案似乎很简单 - 您需要解析 URL 并使用 id 将类in添加到匹配的手风琴中：

// Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
    $('#'+url.split('#')[1]).addClass('in');
}

在Bootstrap 3.1.1中测试并使用。

Answer 2

在Bootstrap 3.3.5中测试并使用。

<script type="text/javascript">
$(document).ready(function () {
    if(location.hash != null && location.hash != ""){
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});
</script>

Answer 3

使用 Bootstrap 4.4 ，只需将这一行添加到我的JS代码中（在文档ready子句中）就可以解决问题：

@HostListener("keydown.control.z", ["$event.target.value"])
onUndo(value) {
    this.el.value = '';
}

Answer 4

我在Yii2中使用折叠小部件。为您的面板分配一个ID 如果你有简单的html，你可以只为你的a-tag添加一个id并更新选择器。

$(function(){
    var hash = document.location.hash;
    if (hash) {
        $(hash).find('a').click();
    }
});

Answer 5

只是对Ilia R的回应。他的解决方案很有效！但唯一的一点是，面板标题样式没有更新（.collapsed类需要从面板标题链接中删除），所以我调整了Ilia R的代码。有人可能有一个更好/更清洁的解决方案，但这是一个开始。

        $(document).ready(function() {
            var url = document.location.toString();
            if ( url.match('#') ) {
                $('#'+url.split('#')[1]).addClass('in');
                var cPanelBody = $('#'+url.split('#')[1]);
                var cPanelHeading = cPanelBody.prev();
                cPanelHeading.find( ".panel-title a" ).removeClass('collapsed');
            }
        });

Answer 6

对我来说工作：

    $(document).ready(function() {
        var url = document.location.toString();
        if ( url.match('#') ) {
            var cPanelBody = $('#'+url.split('#')[1]);
            cPanelBody.find(".panel-title a")[0].click();
        }
    });

Bootstrap 3从URL扩展手风琴

6 个答案: