将手风琴与导航选项卡（Bootstrap）结合使用时出现切换问题

问题描述 投票：0回答：0

所以，我正在使用 Bootstrap 创建这个导航东西，它将以选项卡的形式出现在桌面上，而对于移动设备来说，它将是一个手风琴。它几乎完成了，除了这个错误我无法解决。

问题：如果我单击桌面版本中的任何选项卡（例如链接#3），然后切换到移动设备，则会打开正确的选项卡（即链接#3），但是当我单击它关闭选项卡并隐藏内容时，即使内容被隐藏，按钮和切换仍处于“打开状态”。这个问题可以在台式机或平板电脑中看到（因为它们会显示导航选项卡）。要在桌面上查看问题，只需在单击导航选项卡后减小视口大小即可。

我想，如果我可以使用“classList.contains()”以某种方式跟踪内容何时具有“show”类以及何时不具有，我就能够控制它。但是，我认为它只会在我提到内联类时才跟踪该类（它会持续对第一个内容元素发出 true 警报，对其余元素发出 false 警报）。如果我没有内联提到的类，即使 Bootstrap 在这些类之间内部切换，它也不会跟踪它。或者也许我以错误的方式使用 contains 函数。我不知道。

我还认为，也许如果我可以跟踪点击，即如果单击导航选项卡，然后如果单击手风琴，则应该从手风琴按钮中删除或添加类（“折叠”）。但这会扰乱切换正常工作的其他情况。

我也无法使用toggle() 来实现Bootstrap 手风琴的“折叠”或“显示”。

我什么也想不出来，所以我最后请求你帮助我。请帮我解决这个问题。

编辑： 所以，我已经设法让 .contains() 工作，但然后我需要添加一个递归函数来切换“折叠”类，这会使页面变慢并最终无响应。

这就是我所做的：

  • 添加了一个单击事件（用于手风琴 btn #2），应在导航选项卡中单击链接 #2 后检查该事件
  • 如果在单击导航选项卡（链接#2）后单击手风琴 btn（链接#2），则应检查内容是否可见，如果是，则调用递归函数 btn2Toggle()。 （我想我做了一个非常糟糕的递归函数）

PS：如果toggle() 有效但不起作用，我就不必这样做。另外，我觉得我让它变得比需要的更复杂。我是走对了还是让它变得更复杂？

const btn1 = document.getElementById('btn-1');
const btn2 = document.getElementById('btn-2');
const btn3 = document.getElementById('btn-3');
const tab1 = document.getElementById('nl-1');
const tab2 = document.getElementById('nl-2');
const tab3 = document.getElementById('nl-3');
const content1 = document.getElementById('flush-collapseOne');
const content2 = document.getElementById('flush-collapseTwo');
const content3 = document.getElementById('flush-collapseThree');

// this function will add and remove the collapsed class from btn
function btn2Toggle() {
  btn2.addEventListener('click', function() {
    btn2.classList.add('collapsed');
    btn2.addEventListener('click', function() {
      btn2.classList.remove('collapsed');
      if (btn2.onclick) {
        btn2Toggle();
      }
      else {
        return;
      }
    })
  });
  // or I could simply have this line of code if toggle() worked
  // btn2.addEventListener('click', function() {
  //    btn2.classList.toggle('collapsed');
  //  })
}


function contentVisible() {
    if (content1.classList.contains("show")) {
      // alert('content 1 visible');
    };
    if (content2.classList.contains("show")) {
      // alert('content 2 visible');
      btn2Toggle();
    };
    if (content3.classList.contains("show")) {
      // alert('content 3 visible');
    };
  }


function callTab() {

  // if tab1 is clicked on desktop, show only the content associated with btn1, collapse the rest of them
  if (tab1.addEventListener('click', function() {
    btn2.classList.add('collapsed');
    btn3.classList.add('collapsed');
    btn1.classList.remove('collapsed');
  }));

  // if tab2 is clicked on desktop, show only the content associated with btn2, collapse the rest of them
  if (tab2.addEventListener('click', function() {
    btn1.classList.add('collapsed');
    btn3.classList.add('collapsed');
    btn2.classList.remove('collapsed');
    // if navtab #2 (i.e. Link #2) is clicked and then if accordion 
    // button #2 (i.e. Link #2) is clicked then contentVisible() 
    // will be called
      document.querySelectorAll('.accordion-button').addEventListener('click', contentVisible());
  }));

  // if tab3 is clicked on desktop, show only the content associated with btn3, collapse the rest of them
  if (tab3.addEventListener('click', function() {
    btn1.classList.add('collapsed');
    btn2.classList.add('collapsed');
    btn3.classList.remove('collapsed');
  }));

};


function myFunction(x) {
  if (x.matches) { // If media query matches
     document.querySelectorAll('.nav-link').addEventListener('click', callTab());
  }
}

var x = window.matchMedia("(min-width: 992px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
.container .nav-tabs {
  display: none;
}

/* MEDIA QUERY */
@media screen and (min-width: 992px) {
  .container .nav-tabs {
    display: flex;
  }
  .accordion-item h2 {
    display: none;
  }
  .container .accordion-item {
    border: none;
  }
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    
  </head>
  <body>
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" id="nl-1" aria-current="page" href="#flush-collapseOne" data-bs-toggle="tab">Link #1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nl-2" href="#flush-collapseTwo" data-bs-toggle="tab">Link #2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nl-3" href="#flush-collapseThree" data-bs-toggle="tab">Link #3</a>
        </li>
      </ul>

      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button id="btn-1" onclick="document.querySelector('#nl-1').click()" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Link #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 1</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button id="btn-2" onclick="document.querySelector('#nl-2').click()" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Link #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 2</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button id="btn-3" onclick="document.querySelector('#nl-3').click()" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Link #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 3</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

  </body>
</html>

javascript bootstrap-5 accordion bootstrap-accordion bootstrap-tabs
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.