如何在单击手风琴元素时重定向到另一个 div？

Question

每当 用户单击 default1 选项卡时，它将打开 default2，当 default2 处于活动状态时再次单击 default1 时，它将显示 default1 手风琴。

现在我正在尝试每当用户单击 default1 的任何手风琴元素，即 1 和 2，如图所示，它也会重定向到 default2 选项卡

点击手风琴 1 或 2 元素的任何区域它应该重定向到 default2 标签！

p.s- 不仅在 2 用户可以点击手风琴上的任何地方，它会重定向到 tab2 即 default2

// TAB Buttons
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')

// TAB Content
const allTabPane = document.querySelectorAll('.tab-pane')

tab1.addEventListener('click', toggleTabs);
tab2.addEventListener('click', toggleTabs);

function clickTab(tab) {
    if (tab.parentNode.classList.contains('active') === false) tab.click();
}

function toggleTabs(e) {
  e.preventDefault();
  if (this.parentNode.classList.contains('active')) {
      let toClick = this.parentNode.parentNode.querySelector('li:not(.active) > a');
      setTimeout(function() {
          toClick.click();
      }, 40);
  }
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.acc-head {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}

.tab-accrd a {
  text-decoration: none;
  color: #000;
  font-family: poppins;
}

.tab-accrd a i {
  color: #FC453E;
}

.tab-accrd .card {
  background: #eee;
  border-bottom: 1px solid #FC453E;
  border-radius: 0px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem!important;
}

.accordion-head i {
  float: right;
}

.accordion-head>.collapsed>i:before {
  content: "\f151";
}

html {
  scroll-behavior: smooth;
}

.tab-accrd span {
  font-size: 30px;
  font-weight: 600;
  color: #fc453e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-lg-12 mt-5 tab-accrd">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
        <!-- define id for tabs tab11 and tab12 -->
        <li class="active"><a href="#tab3default" id="tab11" data-toggle="tab">Default 1</a></li>
        <li><a href="#tab4default" id="tab12" data-toggle="tab">Default 2</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab3default">
          <div class="panel-group" id="faqAccordion">
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle question-toggle collapsed" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
                <div class="d-flex" style="align-items:center;">
                  <span onclick="clickTab(tab1)">1</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question5" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

                  </p>

                </div>
              </div>
            </div>
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
                <div class="d-flex" style="align-items:center;">
                  <span onclick="clickTab(tab2)">2</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question6" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="tab-pane fade" id="tab4default">
          <div class="panel-group" id="faqAccordion">
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle question-toggle " style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question9">
                <div class="d-flex" style="align-items:center;">
                  <span onclick="clickTab(tab1)">1</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question9" class="panel-collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                  </p>

                </div>
              </div>
            </div>
            <div class="panel panel-default ">
              <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
                <div class="d-flex" style="align-items:center;">
                  <span onclick="clickTab(tab2)">2</span>
                  <h5 class="panel-title ml-3">
                    What is Lorem Ipsum?
                  </h5>
                </div>

              </div>
              <div id="question1" class="panel-collapse" style="height: 0px;">
                <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

即使禁用了 clickTab() 和 toggleTabs() 功能，在 fiddle 中似乎也能正常工作，我所做的唯一更改是确保加载 javascript 库最后放在正文的底部，以确保 dom 元素在开始发挥作用之前已加载。

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
     <!-- all of your content -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

另外，您的代码中似乎有 non-unique 个 ID 需要修改，否则结果会出乎意料。

https://jsfiddle.net/te28cru4/

更新：

https://jsfiddle.net/te28cru4/10/

更改如下：

选项卡“默认 1”和“默认 2”的面板组是名为 id="faqAccordian" 的重复 ID。 ID 必须是唯一的，因此我将选项卡组“Default 2”的 ID 重命名为 id="faqCollapse2"，并保留“Default 1”不变。这允许在每个选项卡上分隔“折叠”功能。
为 data-parent="#faqAccordian" 设置的“默认 2”页面上的 <div> 元素已更新为 data-parent="#faqAccordian2" 以保持分隔一致。
id="question9" 和 id=question1 的“默认 2”选项卡上的 <div> 元素没有“折叠”class，因此当单击该选项卡时两者最初都得到了扩展。我将折叠 class 添加到两者。
我删除了你所有的 javascript 因为我认为不需要它。 Accordian 功能在 boostrap 库中本地处理。
再次，我将 javascript 库移动到 <body> 标记的底部以允许 dom 加载。
在每个根据的每个内容部分添加了一些 <a> 锚标记，以方便两个选项卡之间的导航。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div class="col-lg-12 mt-5 tab-accrd">
      <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
          <ul class="nav nav-tabs">
            <!-- define id for tabs tab11 and tab12 -->
            <li class="active"><a href="#tab3default" id="tab11" data-toggle="tab">Default 1</a></li>
            <li><a href="#tab4default" id="tab12" data-toggle="tab">Default 2</a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="tab-content">
            <div class="tab-pane fade in active" id="tab3default">
              <div class="panel-group" id="faqAccordion">
                <div class="panel panel-default">
                  <div class="panel-heading accordion-toggle question-toggle collapsed" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
                    <div class="d-flex" style="align-items:center;">
                      <span onclick="clickTab(tab1)">Tab 1-1</span>
                      <h5 class="panel-title ml-3">
                        What is Lorem Ipsum?
                      </h5>
                    </div>
                  </div>
                  <div id="question5" class="panel-collapse collapse" style="height: 0px;">
                    <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

                      </p>
                      <a href="#" class="toTab2">Tab 2</a>
                    </div>
                  </div>
                </div>
                <div class="panel panel-default ">
                  <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
                    <div class="d-flex" style="align-items:center;">
                      <span onclick="clickTab(tab2)">Tab 1-2</span>
                      <h5 class="panel-title ml-3">
                        What is Lorem Ipsum?
                      </h5>
                    </div>
                  </div>
                  <div id="question6" class="panel-collapse collapse" style="height: 0px;">
                    <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                      </p>
                      <a href="#" class="toTab2">Tab 2</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="tab4default">
              <div class="panel-group" id="faqAccordion2">
                <div class="panel panel-default ">
                  <div class="panel-heading accordion-toggle question-toggle collapsed" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion2" data-target="#question9">
                    <div class="d-flex" style="align-items:center;">
                      <span onclick="clickTab(tab1)">Tab 2-1</span>
                      <h5 class="panel-title ml-3">
                        What is Lorem Ipsum?
                      </h5>
                    </div>
                  </div>
                  <div id="question9" class="panel-collapse collapse" style="height: 0px;">
                    <div class="panel-body" style="padding: 15px;
                            background: #eee;">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                      </p>
                      <a href="#" class="toTab1">Tab 1</a>
                    </div>
                  </div>
                </div>
                <div class="panel panel-default ">
                  <div class="panel-heading accordion-toggle collapsed question-toggle" style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion2" data-target="#question1">
                    <div class="d-flex" style="align-items:center;">
                      <span onclick="clickTab(tab2)">Tab 2-2</span>
                      <h5 class="panel-title ml-3">
                        What is Lorem Ipsum?
                      </h5>
                    </div>

                  </div>
                  <div id="question1" class="panel-collapse collapse" style="height: 0px;">
                    <div class="panel-body" style="padding: 15px;
                          background: #eee;">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                      </p>
                      <p>
                      <a href="#" class="toTab1">Tab 1</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

$(document).on('click', '.toTab1', function(e){
        e.preventDefault();
        $('#tab11').trigger('click');
})

$(document).on('click', '.toTab2', function(e){
        e.preventDefault();
        $('#tab12').trigger('click');
})

更新 2：

根据评论中的说明，手风琴不适用于导航，并且通过将它们用于导航，用户将永远看不到展开的手风琴的“内容”部分。手风琴用于垂直压缩内容。

您可能想要的是 html 按钮，您可以根据需要设置任意宽大的样式。

https://www.w3schools.com/tags/tag_button.asp

如何在单击手风琴元素时重定向到另一个 div？

How to redirect to another div while clicking on accordion elements?

html

javascript

css

jquery