问外部目标(URL)和展开面板/手风琴引导。不起作用？
EN

Stack Overflow用户

提问于 2016-07-14 00:04:01

回答 1查看 1.1K关注 0票数 0

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

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

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>

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

我一定是忽略了什么东西，但在几个小时的鬼混之后，我再也看不到了。可能是什么地方的小错误。

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

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

javascript

jquery

twitter-bootstrap

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-14 00:27:36

对不起，当我第一次读错了你想要的东西时，试试下面的代码。

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