Question

我有各种手风琴的页面。其中一些手风琴在页面上引用了另一种手风琴的内容，我的问题是我如何制作它以便第一支手风琴扩展另一支手风琴。

我似乎无法让它发挥作用。

我已将链接设置为<a href="#SubTitle2">Test</a>

在<p>下的第<div class="panel-body">作为<p id="SubTitle2">Content</p>，但这根本不起作用。

我把它放在错误的地方还是我完全错了？

以下是我的完整代码

    <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseOne" data-toggle="collapse">Heading 1</a>
            </h3>
        </div>
        <div class="panel-collapse collapse" id="collapseOne">
            <div class="panel-body">
                <p><a href="#SubTitle2">Test</a></p>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseTwo" data-toggle="collapse">Heading 2</a>
            </h3>
        </div>
        <div class="panel-collapse collapse" id="collapseTwo">
            <div class="panel-body">
                <p id="SubTitle2">Content</p>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您倾向于使用jQuery，可以执行以下操作：

$('#SubTitle2').click(function(){
  $('#collapseTwo').collapse('show');
});

...让锚点设置如下：

<a href="#" id="SubTitle2" data-target="#collapseTwo">Test</a>

您可以在此处测试：http://www.bootply.com/jQMOup05vG

Answer 2

通过使用数据目标，您可以实现此目的

<a data-toggle="collapse" data-target="#id_to_expand">click</a>

希望这会对你有所帮助

Answer 3

通过混合Nasir Mahmood和webeno的答案来管理它。

基本上我混合并匹配两种解决方案，它的工作原理。我的代码现在是：

<p><a class="collapsed" 
      href="#SubTitle2" 
      data-toggle="collapse" 
      data-target="#collapseTwo">Test
</a></p>

由于您无法将回复标记为回答，我将对它们添加评论

Answer 4

以前提交的答案都不适用于我的情况。我不知道提前在页面上存在哪些链接，以及哪些链接需要扩展折叠的部分。我还有嵌套可折叠部分。此外，如果某人从另一个文档链接到页面，我希望进行扩展。所以我找到了一个能够动态检测必须打开哪些部分的解决方案。当点击我关心的链接时，处理程序：

查找目标的所有父项，这些父项是折叠的部分。（$(target).parents(".collapse:not(.in)").toArray().reverse();）
从最外层的父级开始，它请求扩展该元素。（这些是对next()的调用。调用$parent.collapse('show');是显示父母的内容。）
扩展元素后，它会扩展下一个父元素（更接近链接目标）。（if (parents.length)...）
直到最后它要求将目标滚动到视图中。（target.scrollIntoView(true);）

我最初尝试以相反的顺序遍历DOM树，从最内层到最外层，但是我得到了奇怪的结果。即使补偿事件冒泡，结果也不一致。滚动到目标的请求是必要的，因为浏览器可能会在扩展部分之前滚动窗口。

这是代码。 win和doc设置为实际持有正在处理的DOM树的Window和Document实例。由于可能会使用框架，因此只需提及window和document即可。 root变量是Element，它包含我关心的DOM部分。

function showTarget() {
    var hash = win.location.hash;
    if (!hash)
        return;

    var target = doc.getElementById(hash.slice(1));
    if (!target)
        return;

    var parents =
            $(target).parents(".collapse:not(.in)").toArray().reverse();

    function next(parent) {
        var $parent = $(parent);
        $parent.one('shown.bs.collapse', function () {
            if (parents.length) {
                next(parents.shift());
                return;
            }
            target.scrollIntoView(true);
        });
        $parent.collapse('show');
    }
    next(parents.shift());
}
win.addEventListener('popstate', showTarget);
$(root).on('click', 'a[href]:not([data-toggle], [href="#"])',
           function (ev) {
    setTimeout(showTarget, 0);
});
showTarget();

注意：

选择器a[href]:not([data-toggle], [href="#"])将事件侦听限制为仅实际超链接到文档其余部分的a个元素。有时a用于其他目的。例如，具有a属性或data-toggle的{{1}}元素不会用于浏览网页。
href="#"允许点击超链接的默认操作（即哈希更改） first ， then {{1 }} 叫做。这除了FF以外都可以使用。一些测试显示除非提高超时，否则setTimeout(showTarget, 0)将不会看到FF上的更改。 0ms不起作用，1ms不起作用，10ms起作用。无论如何，我宁愿不对某些特定于FF的值进行硬编码，这些值可能会在将来发生变化，因此我们也会听取popstate来捕获那些不会被FF捕获的情况。
当页面加载了带有哈希的URL时，显式调用showTarget是必要的。
我尝试过在showTarget上仅侦听的实现，但由于Chrome和FF在生成showTarget()的方式不同而证明不可靠。（Chrome会在每次点击链接时生成它，即使哈希不更改。只有当哈希值发生变化时，FF才会生成它。）
上述代码已在Chrome（39,38,36），FF（31）和IE（10,11）中进行过测试。

Answer 5

你已经将panel-group id = accordion设置了两次。这不好。将两个面板包装到一个带有一个ID的面板组块中：

   <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseOne" data-toggle="collapse">Heading 1</a>
            </h3>
        </div>
        <div class="panel-collapse collapse" id="collapseOne">
            <div class="panel-body">
                <p><a href="#SubTitle2">Test</a></p>
            </div>
        </div>
    </div>
    <!-- SNIP
    </div>
    <div class="panel-group" id="accordion">
    SNAP -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseTwo" data-toggle="collapse">Heading 2</a>
            </h3>
        </div>
        <div class="panel-collapse collapse" id="collapseTwo">
            <div class="panel-body">
                <p id="SubTitle2">Content</p>
            </div>
        </div>
    </div>
    </div>

Twitter Bootstrap 3 - 当一个链接点击另一个手风琴时自动扩展手风琴

5 个答案: