Question

我有一个下拉列表，可以在下拉菜单中为所选项目切换。通常情况下，当我从下拉列表中按下项目时会切换窗格但是由于新的引导程序版本（4.0.0-beta.2）它不再响应并且它给我留下了tab.js:155 Uncaught TypeError: Cannot read property 'nodeName' of undefined错误。

JSFiddle

<div class="tab-pane fade show active" id="adventure" role="tabpanel" aria-labelledby="adventure-tab">
   <div class="card" style="">
      <div class="tab-content">
         <div class="tab-pane fade show active" id="large-clipper" aria-labelledby="large-clipper-tab">
            <div class="card-header">
               <div class="dropdown btn-group float-right">
                  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Variations
                  </button>
                  <div class="dropdown-menu" role="tablist" aria-labelledby="dropdownMenuButton">
                     <a class="dropdown-item nav-link" id="large-clipper-tab" href="#large-clipper" data-toggle="tab" role="tab" aria-controls="large-clipper" aria-selected="false">Large Clipper</a>
                     <a class="dropdown-item nav-link" id="festive-large-clipper-tab" href="#festive-large-clipper" data-toggle="tab" role="tab" aria-controls="festive-large-clipper" aria-selected="false">Festive Large Clipper</a>
                  </div>
               </div>
               <img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
               <h4 style="display:inline-block">Large Clipper</h4>
            </div>
            <div class="card-body">
               <h6 class="text-muted">
                  Just a big and fast clipper.
               </h6>
               <p class=" p-y-1">
                  <span style="font-style:italic">Level requirements: </span>
                  <span>Adventure: 30 </span>
                  <span>Trade: 56 </span>
                  <span>Maritime: 75</span>
               </p>
               <div class="row">
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
               </div>
            </div>
         </div>
         <div class="tab-pane fade" id="festive-large-clipper"  role="tabpanel" aria-labelledby="large-clipper-tab">
            <div class="card-header">
               <div class="btn-group float-right">
                  <button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
                  <div class="dropdown-menu" aria-labelledby="variationsDropdown">
                     <a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
                     <a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>                                             
                  </div>
               </div>
               <img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
               <h4 style="display:inline-block">Festive Large Clipper</h4>
            </div>
            <div class="card-body">
               <h6 class="text-muted">
                  A large clipper but with fancy plating.
               </h6>
               <p class=" p-y-1">
                  <span style="font-style:italic">Level requirements: </span>
                  <span>Adventure: 30 </span>
                  <span>Trade: 56 </span>
                  <span>Maritime: 75</span>
               </p>
               <div class="row">
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

必填文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 1

v4 beta 2中的标签存在错误，这将在测试版3中修复，请参阅https://github.com/twbs/bootstrap/pull/23087

Bootstrap下拉选项卡不起作用

1 个答案: