Question

真的很疯狂，我必须忽略一些东西，但我不知道是什么。

我试图在点击外部链接后展开我的面板，例如：

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/

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

Answer 1

抱歉，当我第一次读错时，你会理解你想要的东西，试试这段代码。

$(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);

}）;

更新：添加滚动到accordeon ...滚动动画完成按钮打开

jsfiddle

外部目标（URL）和扩展面板/手风琴Boostrap。不工作？

1 个答案: