Question

首先，我是新来的，所以请耐心等待我。

我有一个嵌套的手风琴，我想要它做的是在一个嵌套的手风琴中有一个链接打开一个不同的嵌套手风琴。现在，我可以从Nested Accordion 2.1获取一个链接来打开Nested Accordion 1.1的内容。但是，它不会打开手风琴1，所以看起来链接什么都不做。当您手动打开Accordion 1时，您可以看到Nested Accordion 1.1已经打开。

这是我的HTML code：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#accordion1">Accordion 1</a>
      </h4>
    </div>
    <div id="accordion1" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-group" id="nested-accordion1">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#nested-accordion1" href="#accordion1-1">Nested Accordion 1.1</a>
              </h4>
            </div>
            <div id="accordion1-1" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Description</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#nested-accordion1" href="#accordion1-2">Nested Accordion 1.2</a>
              </h4>
            </div>
            <div id="accordion1-2" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#accordion2">Accordion 2</a>
      </h4>
    </div>
    <div id="accordion2" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Description</p>
        <div class="panel-group" id="nested-accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#nested-accordion2" href="#accordion2-1">Nested Accordion 2.1</a>
              </h4>
            </div>
            <div id="accordion2-1" class="panel-collapse collapse">
              <div class="panel-body">
                <a href="#" data-toggle="collapse" data-target="#accordion1-1">Link to Nested Accordion 1.1</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我可以采取哪些建议来解决这个问题？我目前没有使用任何自定义的JQuery（只是Bootstrap的东西），我觉得为此添加一些JQuery会很有用，但我不知道从哪里开始。

Answer 1

尝试将以下javascript添加到您的项目中。我在代码中留下了评论来描述正在发生的事情。

// run the code inside this block only when the DOM is [ready][1]
$(document).ready(function(){

  // create event listen on accordion2-1's click event, [jQuery][2] 
  $('#accordion2-1').on('click', function(evt, el){

    // find accordion1 and toggle this element
    // "collapse" method is from [bootstrap][1] 
    $('#accordion1').collapse('toggle');
  });
});

使用Bootstrap 3链接到嵌套的手风琴

1 个答案: