外部目标 (URL） 并展开面板/手风琴 Boostrap.不工作

Externally target (URL) and expand panel/accordion Boostrap. Not working?

本文关键字：手风琴 Boostrap 工作 目标 URL 外部      更新时间：2023-09-26

真的要疯了，我一定忽略了什么，但我不知道是什么。

我正在尝试在单击外部链接后使我的面板展开，例如：

http://domain.com/test.php#headingTwo

HTML 如下所示：

            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title greylinks">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      Example text #1
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                    <p>Ipsem lorem whatever #1....</p>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                  <h4 class="panel-title greylinks">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Example text #2
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <div class="panel-body">
                    <p>Ipsem lorem whatever #2....</p> 
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title greylinks">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                      Example text #3
                    </a>
                  </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                  <div class="panel-body">
                    <p>Ipsem lorem whatever #3....</p> 
                  </div>
                </div>
              </div>
            </div>

JS是这样的：

<script>
var activateAccordion = function (id) {
    // Get the parents
    var parents = $('a[href="#' + id + '"]').parents('.panel-group').children('.panel');
    // Go through each of the parents
    $.each(parents, function (idx, obj) {
        // Check if the child exists
        var find = $(obj).find('a[href="#' + id + '"]'),
            children = $(obj).children('.panel-collapse');
        if (find.length > 0) {
            // Show the selected child
            children.removeClass('collapse');
            children.addClass('in');
        } else {
            // Hide the others
            children.removeClass('in');
            children.addClass('collapse');
        }
    });
};
</script>

无论我做什么，它似乎都完全忽略了链接。它确实会转到正确的面板，但是不会展开面板。

我

一定忽略了什么，但经过几个小时的鬼混，我再也看不到它了。可能是某处的一些小错别字。

更新在这里添加了jsfiddle：https://jsfiddle.net/DTcHh/22648/

万一有人误解了我，我正在尝试在电子邮件中创建一个链接，一旦单击它，它应该加载网站并转到打开的面板......

抱歉，当我第一次阅读时，我错误地理解了您想要什么，请尝试此代码。

$(document).ready(function(){
var getHash = location.hash; //get hash from js object location
function activateAccordion (id) 
{
    if(id.length)//check if hash isn't empty
    {
        var accordion = $('a[href="' + id + '"]');
        $('html,body').animate({
            scrollTop: accordion.parents('.panel').offset().top //scroll to accordion
        }, 500,function(){
            accordion.click(); //simulate click
        });
    }
};
activateAccordion(getHash);

}）;

更新：添加了手风琴滚动...卷轴动画完整手风琴打开

斯菲德尔

相关文章：