Bootstrap 3 从 URL 扩展手风琴 [英] Bootstrap 3 expand accordion from URL

问题描述

使用 Bootstrap 3，我尝试使用子导航锚链接(即 index.php#wnsh)来展开指定的手风琴并将页面向下锚定到内容.我试过搜索示例，但运气不佳，可能是因为我的手风琴结构与给定的 BS3 示例不同.这是我的 HTML:

更新:

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

 
<div class="面板"><h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">儿童生存:提高免疫力和管理腹泻</a></h4><div id="cs_c" class="accordion-collapse 折叠在"><p>...</p>
<h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">儿童健康、成长和开发:用碘和铁  预防精神障碍<div id="chgd_c" class="accordion-collapse collapse"><p>...</p>

<h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">妇女和新生儿生存和健康:铁补充剂和食品强化</a></h4><div id="wmnh_c" class="accordion-collapse collapse"><p>...</p>

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');}

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

解决方案

在 Bootstrap 3.3.5 中测试和工作.

Using Bootstrap 3, I'm trying to use sub-navigation anchor links (ie, index.php#wnsh) to expand a specified accordion and anchor down the page to the content. I've tried searching for examples but with little luck, likely because my accordion structure is different from the given BS3 example. Here's my HTML:

UPDATE:

Made a few updates to the code, but it still isn't opening the accordion specified by the hash. Any further thoughts?

            <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');
}

Thanks in advance. Any help would be appreciated.

解决方案

Tested and working in 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>

这篇关于Bootstrap 3 从 URL 扩展手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！