Bootstrap 4 使用卡片手風琴使導航標簽折疊

Question

作為這個小提琴https://jsfiddle.net/dominijk/bLpach25/1/

我在手風琴中有一系列卡片，當另一張卡片打開時會折疊。 我可以讓標簽位於卡內並用作標簽。

我想要做的是將導航選項卡鏈接到卡片折疊

IE。 如果單擊導航選項卡，將顯示選項卡內容並折疊其他卡片，相反，如果打開另一張卡片，則選項卡內容應折疊。

    <div id="accordion3">
    <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseA">
             Colour map 
           </a>
      <!-- Ultimately add collapse all here as https://codepen.io/dominijk/pen/JejNpp-->
    </div>
    <div id="collapseA" class="collapse show" data-parent="#accordion3">
      <div class="card-body" id=menu>
        <fieldset>
          <input id='radioOne' type='radio' name='rtoggle' value='radioOne'>
          <label for='radioOne'>One</label><br>
          <input id='radioTwo' type='radio' name='rtoggle' value='radioTwo'>
          <label for='radioTwo'>Two</label><br>
          <input id='radioThree' type='radio' name='rtoggle' value='radioThree' checked='checked'>
          <label for='radioThree'>Three</label><br>
        </fieldset>
      </div>
    </div>
  </div>
   <div id="accordion2">
   <div class="card">
   <div class="card-header collapse show">
   <a class="collapsed card-link" data-toggle="collapse" href="#collapseB">  
    Filter features by
    </a>
    <ul class="nav nav-tabs">
          <li class="collapsed card-link"><a class="nav-link" data-toggle="tab" 
    href="#tab-1" role="tab">Tab 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab- 
   2" role="tab">Tab 2</a></li>
          <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Tab 3</a></li>
        </ul>
        <div id="collapseB" class="card card-tabs-1" data-parent="#accordion2">
          <div class="card-block">
            <div class="tab-content">
              <div class="tab-pane active" id="tab-1" data-parent="#accordion2">
                <h4 class="card-title">Tab 1</h4>
                <p class="card-text">Content.</p>
              </div>
              <div class="tab-pane" id="tab-2">
                <h4 class="card-title">Tab 2</h4>
                <p class="card-text">Content.</p>
              </div>
              <div class="tab-pane" id="tab-3">
                <h4 class="card-title">Tab 3</h4>
                <p class="card-text">Content</p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseC">
             Show boundaries for
           </a>
      </div>
      <div id="collapseC" class="collapse" data-parent="#accordion2">
        <div class="card-body">
          Card content can be <br>
          <span> span </span>
          <div> div </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseD">
             Another panel
           </a>
      </div>
      <div id="collapseD" class="collapse" data-parent="#accordion2">
        <div class="card-body">
          Card content can be <br>
          <span> span </span>
          <div> div </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

 $(document).ready(function() { $('.nav-link').on('click', function() { if (!$('#collapseB').hasClass('show')) { $('#collapseB').collapse('toggle') } }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> </script> <div id="accordion3"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseA">Colour map</a> </div> <div id="collapseA" class="collapse show" data-parent="#accordion3"> <div class="card-body" id=menu> <fieldset> <input id='radioOne' type='radio' name='rtoggle' value='radioOne'> <label for='radioOne'>One</label><br> <input id='radioTwo' type='radio' name='rtoggle' value='radioTwo'> <label for='radioTwo'>Two</label><br> <input id='radioThree' type='radio' name='rtoggle' value='radioThree' checked='checked'> <label for='radioThree'>Three</label><br> </fieldset> </div> </div> </div> <div class="card"> <div class="card-header "> <a class=" card-link" data-toggle="collapse" href="#collapseB"> Filter features by </a> <ul class="nav nav-tabs" id="features"> <li class=" card-link"><a class="nav-link" data-toggle="tab" href="#tab-1" role="tab">Tab 1</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Tab 2</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Tab 3</a></li> </ul> <div id="collapseB" class="card collapse" data-parent="#accordion3"> <div class="card-block"> <div class="tab-content"> <div class="tab-pane active" id="tab-1"> <h4 class="card-title">Tab 1</h4> <p class="card-text">Libero at quibusdam autem magnam necessitatibus, ullam nisi quo, architecto molestias reprehenderit neque porro velit deleniti ipsa mollitia pariatur! Expedita, eius repudiandae.</p> </div> <div class="tab-pane" id="tab-2"> <h4 class="card-title">Tab 2</h4> <p class="card-text">Magni autem a perferendis tempore perspiciatis aspernatur sapiente fuga deserunt dignissimos consequuntur maiores aliquid hic, in pariatur, officiis repellat voluptatum provident blanditiis.</p> </div> <div class="tab-pane" id="tab-3"> <h4 class="card-title">Tab 3</h4> <p class="card-text">Odio, facilis, vel eum nam architecto maxime consequuntur consectetur et qui eveniet alias minus provident suscipit delectus odit cupiditate similique fuga vero!</p> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseC"> Show boundaries for </a> </div> <div id="collapseC" class="collapse" data-parent="#accordion3"> <div class="card-body"> Card content can be <br> <span> span </span> <div> div </div> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseD"> Another panel </a> </div> <div id="collapseD" class="collapse" data-parent="#accordion3"> <div class="card-body"> Card content can be <br> <span> span </span> <div> div </div> </div> </div> </div> </div>

小提琴